如何解决 React 和 Node/Express 中的 CORS 错误答案

【问题标题】：How to solve CORS error in React and Node/Express如何解决 React 和 Node/Express 中的 CORS 错误
【发布时间】：2020-12-18 14:43:58
【问题描述】：

我在前端使用 React，在后端使用 node/express 服务器，该项目之前运行良好，但现在我遇到了 CORS 错误

CORS 政策已阻止访问“https://dry-reef-22080.herokuapp.com/imageUrl”从源“https://smart-brain-04.herokuapp.com”获取：否“ Access-Control-Allow-Origin' 标头出现在请求的资源上。如果不透明的响应满足您的需求，请将请求的模式设置为“no-cors”以获取禁用 CORS 的资源

我尝试在前端添加模式和标题

fetch(`https://dry-reef-22080.herokuapp.com/imageUrl`, {
      method: "post",
      mode: "no-cors",
      headers: {
        "Access-Control-Allow-Origin": "*",
        "Content-type": "application/json"
      },
      body: JSON.stringify({
        input: this.state.input
      })
    })

我在后端访问另一个名为 clarifail 的外部 api

const Clarifai = require('clarifai');

const app = new Clarifai.App({
    apiKey: 'XYZ'
   });

const handleImageUrl = (req, res) => {
   app.models.predict(
    'c0c0ac362b03416da06ab3fa36fb58e3',
    req.body.input)
    .then(data => {
        res.json(data);
    })
   }

我也尝试使用 npm 包 cors 但问题仍然存在

const express = require('express');
const bcrypt = require('bcrypt-nodejs');
const cors = require('cors');
const knex = require('knex');

const Register = require('./Controllers/Register');
const signin = require('./Controllers/signin');
const profileget = require('./Controllers/profileget');
const image = require('./Controllers/image');

process.env.NODE_TLS_REJECT_UNAUTHORIZED = 0

const db = knex({
    client: 'pg',
    connection: {
      connectionString: process.env.DATABASE_URL,
      ssl: true
    }
  });

const app = express();

app.use(cors())
app.use(express.json());

【问题讨论】：

no-cors 可能不是您想要的。我wrote a blogpost 关于这个。所以，删除no-cors 并分享控制台中出现的错误。
这是错误：-- 从原点 'localhost:3000' 获取 'dry-reef-22080.herokuapp.com/imageUrl' 的访问权限已被 CORS 策略阻止：没有'Access-Control-Allow-Origin' 标头出现在请求的资源上。如果不透明的响应满足您的需求，请将请求的模式设置为“no-cors”以获取禁用 CORS 的资源。
如果dry-reef-22080.herokuapp.com是你的，你需要添加CORS配置，如果不是你的，那么你需要通过你的服务器而不是通过客户端访问它
另外，不要将响应头添加为请求头...Access-Control-Allow-Origin 是响应头，不属于请求
是的，dry-reef-22080.herokuapp.com 是我部署到 heroku 的服务器

标签： javascript node.js reactjs cors

【解决方案1】：

尝试将模式从 fetch 设置为 cors，因为您在后端使用 cors npm 模块，因此您还应该将 cors 用于发送到后端的请求。它应该看起来像这样：

fetch(`https://dry-reef-22080.herokuapp.com/imageUrl`, {
  method: "post",
  mode: "cors",
  headers: {
    "Content-type": "application/json"
  },
  body: JSON.stringify({
    input: this.state.input
  })
})

【讨论】：