通过nginx反向代理解决跨域

先写一个发送跨域请求的页面index.html

<html>
<head><title></title>
</head>
<body><button onclick="sendAjax()">sendAjax</button><script type="text/javascript">var sendAjax = () => {var xhr = new XMLHttpRequest();xhr.open('GET', '/api/getList', true);xhr.send();xhr.onreadystatechange = function (e) {if (xhr.readyState == 4 && xhr.status == 200) {console.log(xhr.responseText);}};}</script>
</body>
</html>

同时node开启一个端口号为666的服务，提供api/getList的接口

const http = require('http');
const fs = require('fs');
const url = require('url');const server = http.createServer(function (req, res) {if (req.url === '/favicon.ico') {return;}const parseUrl = url.parse(req.url, true);console.log('parseUrl', parseUrl.pathname)if (parseUrl.pathname === '/api/getInfo') {const list = {'name': 1, 'age': 2}res.writeHead(200, {'content-Type':'text/html;charset=UTF-8'})  res.end(JSON.stringify(list))}else {res.write(`port: 666`)res.end()}
});server.listen(666, function () {console.log('server is starting on port 666');
});

在conf/nginx.conf中开启一个端口号为8888的服务

server {listen 8888;server_name localhost;location / {root D:/mydoc/front_end/requiredCodeSorting;index index.html;}
}

访问localhost:8888，就可以访问到前面写的页面index.html

点击按钮，发送ajax请求

出现跨域，因为端口号不同

继续配置nginx.conf，对不同的资源请求，指向到对应地址。同样的，将静态资源指向本机服务，将接口指向真正的服务器

server {listen 8888;server_name localhost;location / {root D:/mydoc/front_end/requiredCodeSorting;index index.html;}# 跨域请求location /api/ {proxy_pass http://127.0.0.1:666;}}

添加跨域请求的处理

修改index.html里的请求路径为/api/getInfo

重启服务，可以顺利拿到数据，解决了跨域

参考链接：

利用 Nginx 反向代理解决跨域问题

nginx反向代理解决跨域

这里通过nginx反向代理解决跨域的方式，在web项目的开发阶段和生产阶段都是可以解决跨域问题的

vue中通过webpack-dev-server开启本地服务器实现的代理proxyTable，跟这个nginx反向代理的原理应该差不多。它代理所有请求，从浏览器到服务器，变成浏览器到本地服务器到跨域服务器，从而解决的跨域问题。生产环境里，除非所服务器端渲染，否则不会也不应该起一个本地服务器，所以开发环境下的跨域处理，在生产环境下是不生效的。

参考：https://www.zhihu.com/question/410240698/answer/1366334226

据说，上线后的跨域处理由后端大佬处理，通过cors解决还是nginx反向代理解决呢？咱也不清楚

通过nginx反向代理解决跨域相关推荐

利用nginx 反向代理解决跨域问题
利用nginx 反向代理解决跨域问题参考文章: (1)利用nginx 反向代理解决跨域问题 (2)https://www.cnblogs.com/hpx2020/p/9928175.html 备忘一 ...
nginx反向代理解决跨域问题，使本地调试更方便
nginx反向代理解决跨域问题,使本地调试更方便参考文章: (1)nginx反向代理解决跨域问题,使本地调试更方便 (2)https://www.cnblogs.com/gwf93/p/102951 ...
nginx解决浏览器跨域问题_前端通过Nginx反向代理解决跨域问题
在前面写的一篇文章SpringMVC解决跨域问题,我们探讨了什么是跨域问题以及SpringMVC怎么解决跨域问题,解决方式主要有如下三种方式: JSONP CORS WebSocket 可是这几种方式 ...
Nginx 反向代理解决跨域问题
目录前言 Nginx 反向代理常用配置 Server location proxy_pass add_header OPTIONS 请求 proxy_set_header 跨域的 cookie 传输 ...
Nginx反向代理解决跨域问题（个人学习总结）
一.理解Nginx Nginx是一款轻量级的Web服务器/反向代理服务器及电子邮件(IMAP/POP3)代理服务器,在BSD-like 协议下发行.其特点是占有内存少,并发能力强,事实上nginx的并 ...
【Nginx反向代理解决跨域】
跨域写在前面当今互联网行业,大部分Web项目基本都是采用的前后端分离模式.前端为H5项目,后端为Java.PHP.Python等项目.而且大部分后端服务并不会只部署一套服务,而是会采用Nginx对 ...
webstorm前端使用Nginx 反向代理解决跨域问题
1.webstorm设置端口 2. 3. 4. 5. 把项目放到nginx安装目录的html文件夹下: 6. 配置nginx.conf文件 server {listen 8090; #监听端口serv ...
nginx反向代理解决跨域请求问题
1.出现跨域的表现: 项目的前端调用后台接口时候,会报错: No 'Access-Control-Allow-Origin' header is present on the requested re ...
Nginx 方向代理解决跨域问题-2
概述在浏览器端进行 Ajax 请求时会出现跨域问题,那么什么是跨域,如何解决跨域呢?先看浏览器端出现跨域问题的现象,如下图所示什么是跨域问题? 跨域,指的是浏览器不能执行其他网站的脚本.它是由浏览 ...

通过nginx反向代理解决跨域

通过nginx反向代理解决跨域相关推荐

最新文章

热门文章