关于nginx中CORS跨域配置的问题

最近折腾了一个vue的项目,想放到自己的云服务器上,服务器系统是centos 7,已经安装了node和nginx,但是把打包好的项目通过nginx代理后,发现不能进行跨域请求,于是各种google百度如何在nginx配置cors跨域,试了好多代码,都没效果,望大神帮我看一下。

nginx.conf配置如下:

server {
        listen       80 default_server;
        listen       [::]:80 default_server;
        server_name  maxutian.cn www.maxutian.cn;
        root         /root/hexo/public;

        # Load configuration files for the default server block.
        include /etc/nginx/default.d/*.conf;

        location / {
    }

        error_page 404 /404.html;
            location = /40x.html {
        }

        error_page 500 502 503 504 /50x.html;
            location = /50x.html {
        }
    }

    server {
        listen       80;
        server_name  music.maxutian.cn;
        root         /root/dist;

        # Load configuration files for the default server block.
        include /etc/nginx/default.d/*.conf;
    
    
        location / {
        add_header 'Access-Control-Allow-Origin' '*';
        add_header 'Access-Control-Allow-Methods' 'GET,POST,OPTIONS';
    }
        error_page 404 /404.html;
            location = /40x.html {
        }

        error_page 500 502 503 504 /50x.html;
            location = /50x.html {
        }
    }

由于服务器中不止一个vue项目,所以设置了一个二级域名,写了两个server。第一个server是我的博客,第二个server是vue项目。我的配置应该没问题把?

回答:

可以使用nginx代理转发来实现跨域

server {
    listen  80;
    server_name 127.0.0.1;

    location ~ /api/ {
        proxy_pass  http://127.0.0.1:8081/;
        proxy_set_header Host $host:80;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    }
}

http://127.0.0.1/api/请求转发到http://127.0.0.1:8081/

回答:

楼主需要先了解一下什么是CORS,推荐先看看以下这文章

HTTP访问控制(CORS)

回答:

参考我写的知乎专栏文章:

https://zhuanlan.zhihu.com/p/…

划重点—— add_header 要加 always:

add_header Access-Control-Allow-Origin * always;

回答:

用Nginx实现和跨域同样的效果,这叫反向代理.
一般跨域是要后端代码配合的。
比如Express.js写的:
app.js

app.all('*', function(req, res, next) {
    res.header("Access-Control-Allow-Origin", "*");
    res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept, Connection, User-Agent, Cookie");
    res.header("Access-Control-Allow-Methods", "PUT,POST,GET,DELETE,OPTIONS");
    res.header("X-Powered-By", ' 3.2.1')
    res.header("Content-Type", "application/json;charset=utf-8");
    next();
});

暂无评论

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注