“Access-Control-Allow-Origin”标头已被 CORS 策略阻止 [重复]

Question

我创建 API、后端和前端网站。

我将 Express 用于 API，后端 - 前端使用 ReactJs

所以在我当地一切正常。但是当我部署到服务器时显示此错误消息

Access to XMLHttpRequest at 'http://domain/headline' from origin 'http://domain' has been blocked by CORS policy: The 'Access-Control-Allow-Origin' header contains multiple values '*, *', but only one is allowed.

和

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

在 ReactJs 中，我使用 axios 获取数据。

我已经在我的 nginx 服务器中设置了

location / {
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-NginX-Proxy true;
        proxy_pass http://127.0.0.1:3001;
        proxy_set_header Host $http_host;
        proxy_cache_bypass $http_upgrade;
        proxy_redirect off;
        if ($request_method = 'GET') {
                add_header 'Access-Control-Allow-Origin' 'http://domain';
                add_header 'Access-Control-Allow-Credentials' 'true';
                add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
                add_header 'Access-Control-Allow-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type';
            }
    }

我错过了什么吗？

Answer 1

首先从 npm 由 npm i cors 在您的 api 服务器中安装 cors。 然后在您的 app.js 或 server.js 或 index.js（您创建 http 服务的主文件）中使用这些代码行

const cors = require('cors');
app.use(cors());
app.options('*', cors());