nginx 解决 cookie 携带和跨域问题

问题描述

后端已经设置 了 Access-Control-Allow-Origin: *

但是又需要 cookie ,在前端axios设置完 withCredentials: true 之后,又报错 Access-Control-Allow-Origin 不能为 *

解决思路

动态代理后手动把后端的 Access-Control-Allow-Origin 改为 localhost:3000 (本地服务启动地址)

使用插件 headers-more-nginx-module (尝试过原生功能,无法修改,只能添加 响应头)

解决方式

Nginx 安装以及插件安装(源码编译,这里可以优化)

yum -y install pcre-devel openssl openssl-devel

cd /opt // 安装到opt目录
wget http://nginx.org/download/nginx-1.13.6.tar.gz
tar -xzvf nginx-1.13.6.tar.gz
cd nginx-1.13.6/
wget https://github.com/openresty/headers-more-nginx-module/archive/v0.33.tar.gz
tar -xzvf v0.33.tar.gz
./configure --prefix=/opt/nginx --add-module=/opt/nginx-1.13.6/headers-more-nginx-module-0.33 --with-http_ssl_module --with-http_stub_status_module
make
# 这里会报两个没有log文件的错误,创建一下就行了

nginx 动态代理配置

server {
        listen 82;

        location / {
            add_header Access-Control-Allow-Credentials true;
            more_set_headers 'Access-Control-Allow-Origin: http://localhost:3000';
            
            proxy_pass http://a.b.com; # 动态代理的后端的地址
    }
  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
解决接口跨域问题,可以通过配置Nginx来实现。以下是一种常见的解决方案: 1. 打开Nginx配置文件,通常是位于 `/etc/nginx/nginx.conf` 或 `/etc/nginx/conf.d/default.conf`。 2. 在 `http` 块中添加以下内容: ``` http { ... # 允许跨域请求的域名 add_header Access-Control-Allow-Origin *; # 允许的请求方法 add_header Access-Control-Allow-Methods "GET, POST, OPTIONS, PUT, DELETE"; # 允许的请求头 add_header Access-Control-Allow-Headers "Origin, X-Requested-With, Content-Type, Accept, Authorization"; # 允许携带凭证(如Cookie) add_header Access-Control-Allow-Credentials true; ... } ``` 3. 如果需要处理预检请求(OPTIONS),可以添加以下配置: ``` server { ... # 处理预检请求 if ($request_method = 'OPTIONS') { add_header Access-Control-Allow-Origin *; add_header Access-Control-Allow-Methods "GET, POST, OPTIONS, PUT, DELETE"; add_header Access-Control-Allow-Headers "Origin, X-Requested-With, Content-Type, Accept, Authorization"; add_header Access-Control-Allow-Credentials true; add_header Content-Length 0; add_header Content-Type text/plain; return 204; } ... } ``` 4. 保存配置文件并重新加载Nginx。 这样配置后,Nginx会在响应头中添加相应的CORS(跨域资源共享)相关字段,从而解决接口跨域问题。请注意,此配置将允许所有域进行跨域请求。如需限制只允许特定域名访问,可以将 `Access-Control-Allow-Origin` 的值设置为相应的域名。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值