nginx 跨域_Nginx配置跨域-只有暴漏了问题，才能解决问题

背景

前端仔试过了：node跨域、vue Proxy跨域、jq跨域、后台大佬协助跨域，

这次跨域就是要用 nginx ！！！其他我不管！

html代码

let res = fetch('http://localhost:8088/follow').then(res=>{console.log(res)})

node，server代码

const http = require('http')const server = http.createServer((req,res)=>{  console.log(req)  res.writeHead(200,{'Content-Type':'text-plain'});  res.end('Hello Node');})server.listen(3333, () => {  console.log(`server running at 3333`)})

nginx配置

location  /follow/ {proxy_pass http://localhost:3333;}或者location  /follow/ {proxy_pass http://127.0.0.1:3333;}

报错

Access to XMLHttpRequest at http://localhost:8088/follow' from origin 'null' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

现象

不管怎么调，

1. 修改fetch的url
2. 修改nginx正则匹配规则
3. 给location添加配置头

都无法正确完成nginx跨域。人生很灰暗，感觉自己像是进入了死胡同。

到底是什么原因呢？难道我们一遍遍的试就没有一次是对的吗？

原因

少加了一条代码：add_header 'Access-Control-Allow-Origin' '*';

server {      listen       8088;      server_namelocalhost;      location /follow/ {         add_header 'Access-Control-Allow-Origin' '*';         proxy_pass http://127.0.0.1:3333/;      }}

加完后就能解决！！！

如果还没解决呢？继续看

使用nginx要点：

1. nginx监听端口，一定要未被占用。
2. nginx监听端口可以随意设置，但请求url的主机名、端口号要一致，一变都变。
3. 此时，可以跟 远程(后台)接口地址不一

分析：

能解决的代码知识都在这了，如果还没走通：

1. 重启nginx，看看运行有没有问题。
2. 比对接口、主机名是否一致。

nginx小贴士：

// 启动start nginx// 或者直接点击nginx.exe// 重启nginx -s reload// 立即停止nginx -s st

Q：方法你都懂，为什么还是会报错？

A：懂方法可以确保大方向没问题，报错基本上是不熟悉，理解不到位造成的 漏、忘。

结语：

说实话，'Access-Control-Allow-Origin' '*'，这句代码我知道，node服务会需要，但是。。。唉。

加它是从后台层面解决跨域的方法，我只记住了 后台 却完全忘记了 服务器 天真的以为nginx很强大解决跨域也需要它吗？太尴尬了，太浅显了，太年轻了。