活动网站推广,旅游网站开发研究现状,自助申请海外网站,jeecg 3.7 网站开发一、前言
问题
当我们遇到请求后台接口遇到 Access-Control-Allow-Origin 时#xff0c;那说明跨域了。
跨域
跨域是因为浏览器的同源策略所导致#xff0c;同源策略#xff08;Same origin policy#xff09;是一种约定#xff0c;它是浏览器最核心也最基本的安全功能…一、前言
问题
当我们遇到请求后台接口遇到 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; charsetutf-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 srchttps://backend-domain.com/api?callbackhandleJsonp/script
