前后端分离项目，如何解决跨域问题？ _生活知道

二、Nodejs 代理
复制module.exports = {dev: {// PathsassetsSubDirectory: &
复制module.exports = merge(prodEnv, {NODE_ENV: &
再次点击「登录」按钮，可以看到请求的 URL 发生了改变，原来是 http://localhost:9002/users/login ，现在是 http://localhost:8080/api/users/login 。与此同时，可以看到多了一个 Remote Address，端口也是 8080 ，也就是说经过 Nodejs 的代理，前后端的交互在同一个源下面了，这样就不会发生跨域问题了。
同时，可以看得到，服务器端返回的状态码变成了 200，表示请求成功。
三、开启跨域资源共享
跨域资源共享，也就是 Cross-Origin Resource Sharing，简拼为 CORS，是一种基于 HTTP 头信息的机制，通过允许服务器标识除了它自己以外的资源，从而实现跨域访问。
第一步，开启 CORS 支持
在 Spring Boot 应用中，加入 CORS 的支持简单到不忍直视，添加一个配置类就可以了。
复制@Configurationpublic class GlobalCorsConfig {@Beanpublic CorsFilter corsFilter() {CorsConfiguration config = new CorsConfiguration();// 设置你要允许的网站域名config.addAllowedOrigin(&
本例中，后端返回 Access-Control-Allow-Origin: http://localhost:8080 就表示，跑在 9002 端口下的后端接口可以被 8080 端口的前端请求访问。
如果允许所有域名进行跨域调用的话，只需改变一行代码即可。
复制//允许所有域名进行跨域调用config.addAllowedOriginPattern(&
1)请求方法是以下三种方法之一：
HEADGETPOST
2)HTTP 的头信息不超出以下几种字段：
AcceptAccept-LanguageContent-LanguageLast-Event-IDContent-Type：只限于三个值 application/x-www-form-urlencoded、multipart/form-data、text/plain
那对于会触发 CORS 预检的非简单请求(比如说请求方法是 PUT 或 DELETE，或者 Content-Type 字段的类型是 application/json ，或者请求消息头包含了一些自定义的字段)，该怎么办呢?
非简单请求在正式通信之前，会增加一次 HTTP 查询请求，称为“预检”请求。预检请求通过后，才会返回正常的响应内容。
拿编程猫的文章管理页来举例，该页面会向后端发起一个 posts/queryPageable 的分页查询，该请求包含了一个自定义的消息头 Authorization，于是浏览器认为该请求是一个非简单请求，然后就会自动发起一次 OPTIONS 请求，但由于我们的 Spring Boot 项目整合了 SpringsScurity 安全管理框架，没有对OPTIONS请求放开登录认证，导致验证失败，文章分页请求的响应数据就没有返回回来。
第三步，通过以下代码给 OPTIONS 请求放行。
复制public class SecurityConfig extends WebSecurityConfigurerAdapter {@Overrideprotected void configure(HttpSecurity httpSecurity) throws Exception {ExpressionUrlAuthorizationConfigurer<HttpSecurity>.ExpressionInterceptUrlRegistry registry = httpSecurity.authorizeRequests();//允许跨域请求的OPTIONS请求registry.antMatchers(HttpMethod.OPTIONS).permitAll();}}1.2.3.4.5.6.7.8.9.10.
再次重启后端服务，重新访问文章列表接口，发现有响应数据了。
非简单请求必须首先使用 OPTIONS 请求方法发起一个预检请求到服务器端，以获知服务器是否允许该实际请求。&
我们来通过两张图片简单总结一下预检请求的整个过程，第一张，发起 OPTIONS 预检请求：
第二章，发起正式请求：
四、源码路径
编程猫后端源码：
https://github.com/itwanger/coding-more
编程猫后台管理的前端源码：
https://github.com/itwanger/codingmore-admin-web
参考链接：
跨域：https://segmentfault.com/a/1190000015597029
CORS：https://developer.mozilla.org/zh-CN/docs/Web/HTTP/CORS
阮一峰：https://www.ruanyifeng.com/blog/2016/04/cors.html
简单请求+预检请求：https://github.com/amandakelake/blog/issues/62
【前后端分离项目，如何解决跨域问题？】以上就是朝夕生活（www.30zx.com）关于“前后端分离项目，如何解决跨域问题？”的详细内容，希望对大家有所帮助！

前后端分离项目，如何解决跨域问题？

猜你喜欢