文章目录一、概念1.同源与跨域2.为什么要限制3.跨域请求流程二、解决方式一后端允许跨域1.CrossOrigin2.CORS 过滤器3.实现 WebMvcConfigurationSupport 方法4.手动设置响应头5.配置nginx方式二前端使用代理三、应用场景一、概念1.同源与跨域同源协议 域名 端口。这三个都一样代表请求访问相同资源即同源。跨域请求不同源。跨域是浏览器独有的安全策略同源策略Same-Origin Policy。服务器之间通信没有这个限制。浏览器访问后端有两种情况1、启动后端直接用浏览器访问后端接口属于 “页面导航行为” 是允许的不受 CORS 限制。2、启动前后端用前端浏览器页面访问由于端口不同浏览器会做跨域判断。2.为什么要限制假设没有跨域限制。你登录了银行然后打开一个恶意网站黑客网站通过 JS 可以读取银行网站的信息比如你的银行卡信息。所以浏览器规定不允许一个网站的 JS 随便读取另一个网站的数据。CORS的本质是不允许JS从一个源访问另一个源的数据它限制的是JS请求不同源。html标签也能发起请求比如img、script、link等这种请求就不会被限制。3.跨域请求流程当使用JS请求不同源时会触发跨域限制。1对于JS发起的GET请求服务端返回的响应需要携带CROS响应头浏览器才能查看响应。2对于JS发起的POST请求浏览器会先发一个请求方法为OPTIONS的预检请求询问目标服务器是否允许被该JS源访问若允许访问则返回跨域响应头浏览器发送原本的JS请求到目标服务器服务器返回该请求的响应同时响应头需要携带CORS头这样响应数据才能被网页JS获取。若不允许访问则浏览器会拦截请求。二、解决方式一后端允许跨域后端配置跨域规则当浏览器发来预检请求返回CORS响应头例如//响应头携带代表允许http://localhost:7070源访问。Access-Control-Allow-Origin:http://localhost:7070这里以SpringBoot项目为例设置跨域规则。下面介绍五种方法。1.CrossOrigin既可以放在 Controller 类上也可以放在 Controller 方法上。CrossOrigin(originshttp://localhost:7070,allowCredentialstrue)允许Cookie浏览器默认跨域请求不带Cookie。如果想使用Cookie需要前后端各自设置允许Cookie二者必须配合才能生效。前端设置axios.get(/user,{ withCredentials:true })后端设置allowCredentials “true”。并且此时不能设置origins * 。2.CORS 过滤器在 Spring Boot 后端注册一个 CORS 过滤器来处理请求。//config/CorsConfig.javaConfigurationpublicclassCorsConfig{BeanpublicCorsFiltercorsFilter(){CorsConfigurationconfignewCorsConfiguration();// 允许哪个前端源访问config.addAllowedOrigin(http://localhost:5173);// 允许请求方法config.addAllowedMethod(*);// 允许请求头config.addAllowedHeader(*);// 是否允许携带Cookieconfig.setAllowCredentials(true);UrlBasedCorsConfigurationSourcesourcenewUrlBasedCorsConfigurationSource();source.registerCorsConfiguration(/**,config);returnnewCorsFilter(source);}}3.实现 WebMvcConfigurationSupport 方法ConfigurationpublicclassWebMvcConfigurationextendsWebMvcConfigurationSupport{OverridepublicvoidaddCorsMappings(CorsRegistryregistry){registry.addMapping(/**).allowedOrigins(http://localhost:7070).allowedMethods(GET,POST,PUT,DELETE,OPTIONS).allowedHeaders(*).allowCredentials(true);}}4.手动设置响应头GetMapping(/test)publicStringtest(HttpServletResponseresponse){response.addHeader(Access-Control-Allow-Origin,http://localhost:7070);returnhello;}5.配置nginx#跨域配置 location/api{add_header Access-Control-Allow-Origin $http_origin;add_header Access-Control-Allow-Credentials true;add_headerAccess-Control-Allow-MethodsGET,POST,OPTIONS;add_headerAccess-Control-Allow-Headers*;if($request_methodOPTIONS){add_header Access-Control-Allow-Credentials true;add_header Access-Control-Allow-Origin $http_origin;add_header Access-Control-Allow-Methods GET,POST,OPTIONS;add_header Access-Control-Allow-Headers DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range;add_header Access-Control-Max-Age1728000;add_header Content-Type text/plain;charsetutf-8;add_header Content-Length0;return204;}}小结上面方法原理都一样选哪个都可3常用。方式二前端使用代理前端项目配置代理。通过代理服务器转发请求因为服务器之间通信没有跨域限制。配置代理//vue.config.jsconst{defineConfig}require(vue/cli-service)module.exportsdefineConfig({transpileDependencies:true,devServer:{port:7070,proxy:{/api:{target:http://localhost:8080,//pathRewrite路径重写 意思是把/api换成空pathRewrite:{^/api:}}}}})修改请求urlscriptimportaxiosfromaxiosexportdefault{methods:{handleSend(){axios.post(/api/admin/user/login,{username:admin,password:123456}).then(res{console.log(res.data)}).catch(err{console.log(err.response)})}}}/script三、应用场景推荐开发阶段使用前端代理生产环境使用nginx配置跨域。
