当前位置: 首页 > wzjs >正文

网站建设终端是什么C语言做网站需要创建窗口吗

网站建设终端是什么,C语言做网站需要创建窗口吗,做网站用eclipse吗,门户网站建设方案 模板目录 一,跨域产生的原因二,什么情况下算跨域三,实际演示四,解决跨域的方法 1,CrossOrigin注解2,添加全局过滤器3,实现WebMvcConfigurer4,Nginx解决跨域5,注意 开发项目…

目录
  • 一,跨域产生的原因
  • 二,什么情况下算跨域
  • 三,实际演示
  • 四,解决跨域的方法
    • 1,@CrossOrigin注解
    • 2,添加全局过滤器
    • 3,实现WebMvcConfigurer
    • 4,Nginx解决跨域
    • 5,注意

开发项目的时候因为浏览器同源策略的限制,经常会遇到跨域问题,本篇文章对常见的跨域解决方案做一个记录。

一,跨域产生的原因

之所以产生跨域主要是因为浏览器同源策略的限制。
同源策略,它是由NetSpace提出的一个著名的安全策略。
当一个浏览器的两个tab页中分别打开来自百度和谷歌的页面,当浏览器的百度tab页执行一个脚本的时候会检查这个脚本是属于哪个页面的,即检查是否同源,只有和百度同源的脚本才会被执行。如果非同源,那么在请求数据时,浏览器会在控制台中报一个异常,提示拒绝访问。

二,什么情况下算跨域

一个域名地址由以下几个部分组成:
http://www.aaa.com:8080/sie=UTF-8&wd=SpringBoot

  • 协议:http
  • 域名:子域名www,主域名aaa.com
  • 端口:8080

从一个域名的网页去请求另一个域名的资源时,协议,域名,端口任意不同,都会出现跨域问题。
http://www.aaa.com:8080——>http://www.aaa.com:8080:同域访问
http://www.aaa.com:8080——>http://www.bbb.com:8080:跨域访问

尤其是在前后端分离的开发模式下,跨域请求是避免不了的。

三,实际演示

下面我们以一个实际功能为例:用户输入用户名密码,发往服务端验证。
在这里插入图片描述
因为浏览器同源策略的限制,在浏览器控制台提示我们:
Access to XMLHttpRequest at ‘http://192.168.1.10:7080/tick-tack/login’ from origin ‘http://192.168.1.10:7060’ has been blocked by CORS policy: Response to preflight request doesn’t pass access control check: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.
我们还可以在Network里看到,浏览器在发送我们输入的用户名,密码等数据之前,还发送了一次OPTIONS的请求,这是浏览器自动发送的,为了验证是否允许跨域访问。
在这里插入图片描述

四,解决跨域的方法

我们已经知道,浏览器在发送请求之前会先发送一个OPTIONS请求,来校验是否允许跨域访问,校验的结果存放在头信息的Access-Control-Allow-Origin,因此解决跨域也就是设置头部信息。有四种方法解决跨域。

1,@CrossOrigin注解

我们可以在特定的某些接口加上@CrossOrigin注解,表示该接口允许跨域访问。注:未加该注解的接口仍不允许跨域访问

@PostMapping("/login")
@CrossOrigin
public Result loginSystem(@RequestBody LoginUser user) {if (StringUtils.isBlank(user.getUserAccount()) || StringUtils.isBlank(user.getPassword())) {return Result.error(Constants.CODE_400, "参数错误");}TickToken tickToken = ILoginService.loginSystem(user);return Result.success(tickToken);
}

@CrossOrigin注解中的origins还可设置域名,表示只有该域名访问时允许跨域,如:@CrossOrigin(origins =“http://localhost:7060”);
若origins未设置值,表示所有域名都可以跨域访问该接口
在这里插入图片描述

2,添加全局过滤器

若项目中所有接口都允许跨域访问,可增加全局过滤器允许跨域访问。

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.cors.CorsConfiguration;
import org.springframework.web.cors.UrlBasedCorsConfigurationSource;
import org.springframework.web.filter.CorsFilter;@Configuration
public class CorsConfig {// 当前跨域请求最大有效时长。这里默认1天private static final long MAX_AGE = 24 * 60 * 60;@Beanpublic CorsFilter corsFilter() {UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();CorsConfiguration corsConfiguration = new CorsConfiguration();corsConfiguration.addAllowedOrigin("*"); // 1 设置访问源地址,或者http://localhost:7060corsConfiguration.addAllowedHeader("*"); // 2 设置访问源请求头corsConfiguration.addAllowedMethod("*"); // 3 设置访问源请求方法,或设置为"GET", "POST", "DELETE", "PUT"corsConfiguration.setMaxAge(MAX_AGE);source.registerCorsConfiguration("/**", corsConfiguration); // 4 对接口配置跨域设置return new CorsFilter(source);}
}
3,实现WebMvcConfigurer
import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;@Configuration
public class WebConfig implements WebMvcConfigurer {// 当前跨域请求最大有效时长。这里默认1天private static final long MAX_AGE = 24 * 60 * 60;@Overridepublic void addCorsMappings(CorsRegistry registry) {registry.addMapping("/**").allowedOrigins("*").allowedMethods("*").allowedHeaders("*").maxAge(MAX_AGE);}
}
4,Nginx解决跨域

如果项目中有使用Nginx来转发请求,那也可以交由Nginx来解决跨域,但是有一点需要注意:Nginx解决跨域和后端解决跨域最好只保留一个,两种混用会出现很多奇怪的问题。
下面是nginx.conf文件解决跨域的相关配置:

server {listen       80;server_name  localhost;location  / {if ($request_method = 'OPTIONS') {add_header Access-Control-Allow-Origin 'http://localhost:7060';add_header Access-Control-Allow-Headers '*';add_header Access-Control-Allow-Methods '*';add_header Access-Control-Allow-Credentials 'true';return 204;}if ($request_method != 'OPTIONS') {add_header Access-Control-Allow-Origin 'http://localhost:7060' always;add_header Access-Control-Allow-Credentials 'true';}proxy_pass  http://localhost:59200; }}
5,注意

说明: 文章中很多地方为了方便,Access-Control-Allow-Origin设置成了*,这个在开发测试的时候可以这么设置,但如果是生产环境,建议不要设置成*,最好是允许哪些域名访问就设置哪些,毕竟限制域名还是很有必要的。

http://www.dtcms.com/wzjs/551580.html

相关文章:

  • 网站开发培训实训公司网站与营销网站在栏目上的不同
  • 兵团建设环保局网站网上医疗和医院网站建设制作
  • 福州企业网站建设专业服务上海高端品牌网站建设
  • 精品课程网站建设毕业设计论文怎么做正规网站
  • t恤在线设计网站app免费下载
  • 做最优秀的自己演讲视频网站网络工程属于计算机类吗
  • 做影视网站难吗专门做微信小程序的公司
  • 阿里巴巴网站建设缺点白银市城县建设局网站
  • 个人备案网站会影响吗网页设计和网站建设实战大全
  • 购买一个网站需要多少钱高端网站设计上海网站建设上海
  • 学了lamp做网站就足够了吗南昌网站seo外包服务
  • 网站开发文档撰写模板旅游网站建设网
  • 湖南平台网站建设哪家好帝国网站管理系统安装连接不上数据库
  • 福州网红外包网站怎么做seo
  • 论坛型网站开发山东机关建设网站
  • 做网站的设计文档怎么做牛商网网站建设多少钱
  • pc网站原型设计工具免费化妆品网站模板下载
  • 太原百度网站建设科技+杭州+网站建设
  • 济南网站建设公司大全网站服务器租用协议
  • 怎么推销自己的网站WordPress 门票
  • 网站建设费用自建wordpress写技术博客
  • 建设银行面试经验网站云南城市建设培训中心网站
  • 数据管理网站模板企业网页制作教程和流程
  • 图片做网站连接网易云wordpress
  • 乐从网站开发做同城信息网站怎么赚钱
  • 太原高端网站建设一个主机可以做几个网站
  • wordpress 英文企业站设计官网的作用
  • 网站效果图设计思路广州网络推广定制
  • 生肖竞猜网站建设教人做窗帘的视频网站
  • 怎么知道网站程序是什么做的做dota2菠菜网站