文章目录
- 介绍
- 解决
- 一、添加跨域头,允许跨域
- 1.后端配置CORS策略(4种方法)
- 2.配置nginx
- 二、代理
介绍
跨域资源共享(CORS, Cross-Origin Resource Sharing)是浏览器的一个安全机制,用来防止来自一个域的网页对另一个域下的资源进行请求。仅允许向 同域名、同端口 的服务器发送请求。
对于前后端分离的项目,往往会有跨域问题。
解决
一、添加跨域头,允许跨域
1.后端配置CORS策略(4种方法)
浏览器检测到跨域请求时,会先发送一个预检请求(OPTIONS)给后端服务器,若后端配置了CORS策略,即返回允许的 CORS 头(如 Access-Control-Allow-Origin)来告诉浏览器它允许跨域请求。如果服务器未返回这些头,浏览器将阻止实际请求。如果预检请求成功,浏览器将继续发送实际的请求。如果服务器的响应中没有正确的 CORS 头,浏览器同样会阻止实际请求的返回数据。
2.配置nginx
#跨域配置
location /api {add_header 'Access-Control-Allow-Origin' $http_origin;add_header 'Access-Control-Allow-Credentials' 'true';add_header Access-Control-Allow-Methods 'GET, POST, OPTIONS';add_header Access-Control-Allow-Headers '*';if ($request_method = 'OPTIONS') {add_header 'Access-Control-Allow-Credentials' 'true';add_header 'Access-Control-Allow-Origin' $http_origin;add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range';add_header 'Access-Control-Max-Age' 1728000;add_header 'Content-Type' 'text/plain; charset=utf-8';add_header 'Content-Length' 0;return 204;}
}
二、代理
代理的原理是,由于CORS检测只会在客户端进行,只需要前端的请求也是同域名同端口即可,前端发送请求到代理服务器,这个代理服务器和前端服务器的域名和端口一致,不会触发CORS,然后代理服务器再将请求转发给后端服务器即可。
开发环境: 前端使用代理,简化开发过程中的跨域问题。
代理的实质是转发请求,前端请求到代理时浏览器会认为是同源,不会触发跨域限制,之后代理服务器再将请求转发给后端服务器。
比如proxy.ts文件里的
生产环境:
可使用Nginx或其他反向代理服务器
location /api {proxy_pass http://127.0.0.1:8080;
}