怎么查出这个网站是谁做的,国外网站做调查,学电商运营需要多少钱,hao123主页怎么删除文章目录 前言一、同源策略二、跨域是什么#xff1f;三、Nginx解决跨域1.前端示例代码2.说明 四、nginx反向代理配置五、启动nginx六、最终效果总结 前言
Nginx反向代理解决跨域
一、同源策略
定义#xff1a;同源策略#xff08;Same-Origin Policy#xff09;是指浏览… 文章目录 前言一、同源策略二、跨域是什么三、Nginx解决跨域1.前端示例代码2.说明 四、nginx反向代理配置五、启动nginx六、最终效果总结 前言
Nginx反向代理解决跨域
一、同源策略
定义同源策略Same-Origin Policy是指浏览器限制一个源origin的文档或脚本如何与另一个源的资源进行交互的安全策略。源是由协议如HTTP HTTPS、域名如example.com和端口号如80、443组成的唯一标识。原理根据同源策略如果两个资源的协议、域名和端口号完全相同则它们被认为是同源的可以相互访问和交互。否则它们被认为是不同源的浏览器会限制它们之间的交互以防止恶意网站通过跨域请求获取用户的敏感信息或进行其他恶意操作。
二、跨域是什么
跨域Cross-Origin是指在浏览器中当前正在访问的页面的域名与请求的资源域名不一致的情况。 例如在A网站上通过AJAX请求B网站的数据时就会产生跨域问题。跨域问题通常发生在前后端分离的应用中当前端和后端部署在不同的域或端口上时浏览器出于安全考虑会阻止跨域请求。跨域是由浏览器的同源策略造成的。
三、Nginx解决跨域
nginx通过反向代理解决跨域问题本文是直接在nginx目录html操作的,完成这步你需要下载nginx https://nginx.org/自行去官网下载
1.前端示例代码 代码如下示例
!DOCTYPE html
htmlheadmeta charsetutf-8 /meta nameviewport contentwidthdevice-width, initial-scale1title/title/headbodybutton idbtn点击获取/buttonscriptbtn.onclick () {let xhr new XMLHttpRequest()console.log(222);// 注意这里我们地址不要写后端完整地址我们给前面加一个/api就行把// 端口哪里删去xhr.open(GET, /api/user/all)xhr.onreadystatechange () {if (xhr.readyState 4 xhr.status 200) {console.log(JSON.parse(xhr.responseText))}}xhr.send()}/script/body/html2.说明
这是我后端服务器上的接口地址端口号是在5000而我前端页面是80端口所以就会导致跨域问题 四、nginx反向代理配置
配置反向代理这里的/api/一定要与前端请求接口地址一致。
location /api/ {proxy_pass http://127.0.0.1:5000/;
}五、启动nginx
双击点击nginx.exe启动即可 六、最终效果
发现我们后端请求就成功了。
总结
综上所述Nginx解决跨域问题的方法有很多比如修改响应头、使用CORS模块。但你可以根据实际需求选择最适合的方法来解决跨域问题。
