请求项目API出现CORS跨域错误

  1. 确保项目已经正确启动, 可以通过查看项目日志, 访问项目端口等方式测试
  2. 新建一个网站, nginx反代服务器项目端口,并添加以下请求头:
# 添加 CORS 相关的头部
        add_header 'Access-Control-Allow-Origin' '*';  # 允许所有域名访问
        add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';  # 允许的请求方法

        # 如果需要处理预检请求
        if ($request_method = OPTIONS) {
            add_header 'Access-Control-Allow-Origin' '*';
            add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
            add_header 'Access-Control-Allow-Headers' 'Content-Type';
            add_header 'Content-Length' 0;
            return 204;  # 返回204 No Content
        }
  1. 保存后重载nginx服务, 再访问就不会出现CORS跨域错误了

Tips

反代的相关的代码是类似这样的

location ^~ / {
    proxy_pass http://127.0.0.1:8080; 
    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 REMOTE-HOST $remote_addr; 
    proxy_set_header Upgrade $http_upgrade; 
    proxy_set_header Connection "upgrade"; 
    proxy_set_header X-Forwarded-Proto $scheme; 
    proxy_http_version 1.1; 
    add_header X-Cache $upstream_cache_status; 
    add_header Cache-Control no-cache; 
    proxy_ssl_server_name off; 
    add_header Strict-Transport-Security "max-age=31536000"; 
}