使用node.js或者nginx反向代理解除浏览器跨域

最近在自学node.js写博客项目但是写好接口后，前端使用ajax请求接口数据的时候浏览器就显示跨域了请求不了数据，很是头大 花了好几天弄这个跨域 现在有些头绪也有解决方法分享给大家

关于跨域

为什么会有跨域这种东西？让浏览器请求不到同域名的数据。摸索了三四天林林总总的归纳出我自己的理解和观点：当浏览器当前页面请求的数据地址跟你当前页面的域名地址一样且不同端口时就会触发，这个算是浏览器自带的保护机制，防止有些恶意请求和入侵攻击。触发的报错基本就像这样 jquery-3.5.1.js:10099 Access to XMLHttpRequest at 'http://172.30.1.69:3000/api/blog/list' from origin 'http://localhost:8001' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

1.jpg
image.png

解决方法

node.js服务端

server端加上这行代码

res.setHeader("Access-Control-Allow-Origin","*")

设置头部可以跨域
访问post请求时还是会出现跨域，经过仔细观察发现发送post前浏览器会先发起一个option请求，如果option请求不通过，那么post请求就发不出去，这时候就需要在server端判断option请求放行。

image.png

server处理option请求

if(req.method == 'OPTIONS'){
                // 回复OPTIONS
                res.writeHead(200, {
                    'Content-Type': 'text/plain',
                    'Access-Control-Allow-Origin': '*',
                    'Access-Control-Allow-Headers': 'Content-Type, Content-Length, Authorization, Accept, X-Requested-With , yourHeaderFeild, sessionToken',
                    'Access-Control-Allow-Methods': 'PUT, POST, GET, DELETE, OPTIONS'
                });
                res.end('');
            }else{
                res.writeHead(404,{"Content-Type":"text/plain"}),
                res.write("404 Not Found\n")
            }

以上是node.js处理的方法，不过我试过之后还有是瑕疵的，因为server发送的cookie浏览器保存不了。请求头里的set-cookie都有，原因是浏览器发现是同源跨域发送的cookie不会进行储存，资料找来找去浏览器储存不了很麻烦。

image.png
image.png

如果不使用cookie的话还挺好，要的话会比较头疼，所以nginx反向代理才是普遍也是更优的选择

nginx反向代理

nginx.conf编辑文件,把原来的localtion用#号注释掉，改成如下

location / {
                    #前端页面所在的域名端口
            proxy_pass http://localhost:8001;
        }
               #api所在的域名端口
        location /api/ {
            proxy_pass http://localhost:3000;
            proxy_set_header Host $host;
        }

tips:反向代理后，前端页面ajax请求的域名地址也要改成相对路径

image.png