一、前言
问题
当我们遇到请求后台接口遇到 Access-Control-Allow-Origin 时，那说明跨域了。
跨域
跨域是因为浏览器的同源策略所导致，同源策略（Same origin policy）是一种约定，它是浏览器最核心也最基本的安全功能，同源是指：域名、协议、端口相同；
二、解决方式
2.1 服务端配置
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 CorsConfig implements WebMvcConfigurer {@Overridepublic void addCorsMappings(CorsRegistry registry) {registry.addMapping("/**") // 允许跨域的路径.allowedOrigins("*") // 允许跨域请求的域名.allowedMethods("GET", "POST", "PUT", "DELETE") // 允许的请求方法.allowedHeaders("*") // 允许的请求头.allowCredentials(true); // 是否允许证书（cookies）}
}
2.2 前端代理
2.2.1 本地环境
配置vue.config.js
在开发环境中，可以配置一个代理服务器来转发 API 请求，绕过浏览器的同源策略。在 vue.config.js 文件中进行配置如下：
module.exports = {devServer: {proxy: {'/api': { // 拦截以/api开头的请求路径target:'服务端地址',changOrigin: true,pathRewrite:{'^/api': '' // 重写api，把api变成空字符}}}}
}
axios配置
import axios from 'axios'
var http = axios.create({baseURL: 'api',timeout: 5000
})
2.2.2 线上环境
在nginx.conf中添加服务配置如下【注释部分必须】：
server {listen 8080;server_name localhost;location /api {# 允许跨域的请求，可以自定义变量$http_origin，*表示所有add_header 'Access-Control-Allow-Origin' *;# 允许携带cookie请求add_header 'Access-Control-Allow-Credentials' 'true';# 允许跨域请求的方法：GET,POST,OPTIONS,PUTadd_header 'Access-Control-Allow-Methods' 'GET,POST,OPTIONS,PUT';# 允许请求时携带的头部信息，*表示所有add_header 'Access-Control-Allow-Headers' *;# 允许发送按段获取资源的请求add_header 'Access-Control-Expose-Headers' 'Content-Length,Content-Range';# 一定要有！！！否则Post请求无法进行跨域！# 在发送Post跨域请求前，会以Options方式发送预检请求，服务器接受时才会正式请求if ($request_method = 'OPTIONS') {add_header 'Access-Control-Max-Age' 1728000;add_header 'Content-Type' 'text/plain; charset=utf-8';add_header 'Content-Length' 0;# 对于Options方式的请求返回204，表示接受跨域请求return 204;}proxy_pass http://localhost:80;}
}
2.3 JSONP
仅支持GET请求的API，可以使用JSONP方式绕过CORS限制。在Vue中，可以使用script标签动态加载URL实现：
<script>
function handleJsonp(data) {// 处理你的数据
}
</script>
<script src="https://backend-domain.com/api?callback=handleJsonp"></script>
