uni-app ngnix配置反向代理后还是跨域

发布于 1周前 作者 sinazl 来自 Uni-App

uni-app ngnix配置反向代理后还是跨域

问题描述

ngnix配置反向代理后还是跨域怎么破，后端处理跨域的话session又一直变化，导致验证码功能无法验证，当uni.request设置withCredentials:true后又会出现跨域，有大佬遇到过这种情况吗，求大佬解答

ngnix配置

location / {
    add_header Access-Control-Allow-Origin *；
    add_header Access-Control-Allow-Methods 'GET, POST, OPTIONS'；
    add_header Access-Control-Allow-Headers 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range'；
    add_header Access-Control-Expose-Headers 'Content-Length,Content-Range'；
    
    proxy_pass http://localhost：9090；
}

表格信息

信息类型 信息内容
开发环境 未提及
版本号 未提及
项目创建方式 未提及

Harmonyos Next教程
1 回复

在处理uni-app与Nginx配置反向代理后仍然出现的跨域问题时，关键在于确保Nginx正确配置了CORS（跨来源资源共享）策略。以下是一个基于Nginx配置的示例，用于解决uni-app请求后端API时的跨域问题。

首先，确保你的Nginx配置文件（通常是/etc/nginx/nginx.conf或者站点特定的配置文件，如/etc/nginx/sites-available/default）中包含了对uni-app访问的后端API的代理设置。假设你的uni-app前端部署在http://example.com，而后端API位于http://api.example.backend.com。

  1. 配置Nginx反向代理：
server {
    listen 80;
    server_name example.com;

    location / {
        root /path/to/uni-app/dist;
        try_files $uri $uri/ /index.html;
    }

    location /api/ {
        proxy_pass http://api.example.backend.com/;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;

        # 添加CORS头部
        add_header 'Access-Control-Allow-Origin' 'http://example.com';
        add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
        add_header 'Access-Control-Allow-Headers' 'Origin, Content-Type, Accept';

        # 对于OPTIONS请求，直接返回204状态码
        if ($request_method = 'OPTIONS') {
            add_header 'Access-Control-Max-Age' 1728000;
            add_header 'Content-Type' 'text/plain charset=UTF-8';
            add_header 'Content-Length' 0;
            return 204;
        }
    }
}
  1. 重启Nginx服务：

配置完成后，需要重启Nginx服务以使配置生效。使用以下命令：

sudo systemctl restart nginx

或者，如果你使用的是较旧的init.d脚本：

sudo service nginx restart
  1. 注意事项：
  • 确保Access-Control-Allow-Origin的值与你的uni-app前端部署的域名匹配。
  • 根据需要调整Access-Control-Allow-Methods和Access-Control-Allow-Headers的值，以允许特定的HTTP方法和头部。
  • 如果你有多个前端域名需要访问后端API，可以使用正则表达式匹配多个源，或者使用*作为通配符（注意，使用*可能会带来安全风险）。

通过上述配置，Nginx将作为中间层处理跨域请求，确保uni-app前端能够顺利访问后端API。

回到顶部