青海建设厅网站,学编程要多少钱,天眼查企业信息查询平台官网,网络营销五个主要手段文章目录 介绍解决一、添加跨域头#xff0c;允许跨域1.后端配置CORS策略(4种方法)2.配置nginx 二、代理 介绍
跨域资源共享#xff08;CORS, Cross-Origin Resource Sharing#xff09;是浏览器的一个安全机制#xff0c;用来防止来自一个域的网页对另一个域下的资源进行… 文章目录 介绍解决一、添加跨域头允许跨域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; charsetutf-8;add_header Content-Length 0;return 204;}
}二、代理
代理的原理是由于CORS检测只会在客户端进行只需要前端的请求也是同域名同端口即可前端发送请求到代理服务器这个代理服务器和前端服务器的域名和端口一致不会触发CORS然后代理服务器再将请求转发给后端服务器即可。
开发环境 前端使用代理简化开发过程中的跨域问题。 代理的实质是转发请求前端请求到代理时浏览器会认为是同源不会触发跨域限制之后代理服务器再将请求转发给后端服务器。 比如proxy.ts文件里的
生产环境 可使用Nginx或其他反向代理服务器
location /api {proxy_pass http://127.0.0.1:8080;
}
