SpringBoot+Vue项目跨域问题

一、前言

问题

当我们遇到请求后台接口遇到 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 {
 
    @Override
    public 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,PUT
        add_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>