跨域问题是前后端分离项目中非常常见的一个问题，举例来说，编程猫（codingmore）学习网站的前端服务跑在 8080 端口下，后端服务跑在 9002 端口下，那么前端在请求后端接口的时候就会出现跨域问题。
403 Forbidden 是HTTP协议中的一个状态码（Status Code），意味着后端服务虽然成功解析了请求，但前端却没有访问该资源的权限。
那怎么解决这个问题呢？通常有两个思路：
一、关于跨域
跨域对于前后端开发者来说，就像一块狗皮膏药，无论是面试还是开发中，都会经常遇到。
之所以出现跨域问题，是因为浏览器的同源策略，为了隔离潜在的恶意文件，为了防御来自歪门邪道的攻击，浏览器限制了从同一个源加载的文档或脚本与来自另一个源的资源进行交互。
前面我们提到了，前端跑在 8080 端口下，后端跑在 9002 端口下，这种情况就属于不同的源（域名不同，协议不同，端口不同），所以 8080 端口下的前端请求直接访问 9002 端口下的后端接口时就访问失败了。
那正确的打开方式是什么呢？我们前面也提到了，前端使用 Nodejs 代理或者后端开启跨域资源共享，我们一一来实践下。
二、Nodejs 代理
在 Nodejs 出现之前，JavaScript 编写的程序通常需要在用户的浏览器上执行，Node.js 出现后，JavaScript 也能用于服务端编程了。Nodejs 一系列的内置模块使得程序可以脱离 IIS、Apache 这种 Web 服务作为独立的服务器执行。
我们使用 Nodejs 来解决跨域问题的思路就是，在本地创建一个虚拟服务器，对 8080 端口下的前端请求进行代理，同时接收 9002 端口下的服务器端响应，这样服务端和服务端进行数据的交互就不会出现跨域问题了。
第一步，配置 Nodejs 代理服务
module.exports = {
dev: {
// Paths
assetsSubDirectory: 'static',
assetsPublicPath: '/',
proxyTable: {
'/api': {
target: 'http://localhost:9002', // 你请求的第三方接口
changeOrigin: false, // 在本地会创建一个虚拟服务端，然后发送请求的数据，并同时接收请求的数据，这样服务端和服务端进行数据的交互就不会有跨域问题
pathRewrite: { // 路径重写，
'^/api': '' // 替换target中的请求地址，也就是说以后你在请求http://api.codingmore.top/v2/XXXXX这个地址的时候直接写成/api即可。
}
},
},
}
第二步，配置前端访问请求路径
module.exports = merge(prodEnv, {
NODE_ENV: '"development"',
VUE_APP_BASE_API: '"/api"'
// VUE_APP_BASE_API: '"http://localhost:9002"'
})
第三步，重启前端服务
再次点击「登录」按钮，可以看到请求的 URL 发生了改变，原来是 :9002/users/login，现在是 :8080/api/users/login。与此同时，可以看到多了一个 Remote Address，端口也是 8080，也就是说经过 Nodejs 的代理，前后端的交互在同一个源下面了，这样就不会发生跨域问题了。
同时，可以看得到，服务器端返回的状态码变成了 200，表示请求成功。
三、开启跨域资源共享
跨域资源共享，也就是 Cross-Origin Resource Sharing，简拼为 CORS，是一种基于 HTTP 头信息的机制，通过允许服务器标识除了它自己以外的资源，从而实现跨域访问。
第一步，开启 CORS 支持
在 Spring Boot 应用中，加入 CORS 的支持简单到不忍直视，添加一个配置类就可以了。
@Configuration
public class GlobalCorsConfig {
@Bean
public CorsFilter corsFilter() {
CorsConfiguration config = new CorsConfiguration();
// 设置你要允许的网站域名
config.addAllowedOrigin("http://localhost:8080");
//允许跨域发送cookie
config.setAllowCredentials(true);
//放行全部原始头信息
config.addAllowedHeader("*");
//允许所有请求方法跨域调用
config.addAllowedMethod("*");
UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
source.registerCorsConfiguration("/**", config);
return new CorsFilter(source);
}
}
第二步，重启后端服务，再次点击登录按钮，发现请求已经可以正常访问了。
本例中，后端返回 Access-Control-Allow-Origin: :8080 就表示，跑在 9002 端口下的后端接口可以被 8080 端口的前端请求访问。
如果允许所有域名进行跨域调用的话，只需改变一行代码即可。
//允许所有域名进行跨域调用
config.addAllowedOriginPattern("*");
// 设置你要允许的网站域名
// config.addAllowedOrigin("http://localhost:8080");
对于 login 这种简单的请求来说，它们是不会触发 CORS 预检的，因此不需要在服务器端增加其他配置就可以了。那什么是简单请求呢？
1）请求方法是以下三种方法之一：
———END———
限 时 特 惠： 本站每日持续更新海量各大内部创业教程，一年会员只需98元，全站资源免费下载 点击查看详情
站 长 微 信： wxii2p22
admin
