跨域问题(CORS)

文章目录

介绍
解决
- 一、添加跨域头，允许跨域
- - 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;
}