响应客户端不会遵循重定向CORSlocalhost

Question

前端：localhost:3000（反应应用程序）加载pp.js（客户端）调用api/

function fetch_redirect() {
  fetch("http://localhost:8082")
}

function App() {
  return <div className="App">{fetch_redirect()}</div>;
}

export default App;

后端：localhost:8082（nodejs express应用程序）发送重定向到客户端上的/测试endpoint

const express = require('express')
const app = express()
const cors = require('cors');

const whitelist = ['http://localhost:3000']
const corsOptions = {
  origin: function (origin, callback) {
      console.log(origin, whitelist.indexOf(origin) !== -1);
    if (whitelist.indexOf(origin) !== -1) {
      callback(null, true)
    } else {
      callback(new Error('Not allowed by CORS'))
    }
  }
}

app.use(cors(corsOptions))
app.get('/', function (req, res) {
          res.redirect('http://localhost:3000/test')
    })
     
    app.listen(8082)

主要问题在于客户端（react），一旦API调用完成，重定向将被阻止。。。如何使客户端应用程序响应此重定向到'http://localhost:3000/test'我的后端已经有cors，启用了localhost:3000的白名单，允许我使API调用不被阻止。。。但是，现在已从提取前端阻止重定向！

错误详细信息：从http://localhost:3000/test获取（从http://localhost:8082/重定向）http://localhost:3000的访问已被CORS策略阻止：请求的资源上不存在访问-控制-允许-起源标头。如果不透明的响应满足您的需求，请将请求的模式设置为no-cors，以在禁用CORS的情况下获取资源。

Answer 1

尝试使用下一个函数在app.get：

app.get('/', function (req, res, next) {
  res.redirect('http://localhost:3000/test');
  next();
})

另外，对于您的ReactJS应用程序（我不确定您的实现，CSR或SSR），您应该添加两件事：

• Webpack: proxy for passing CORS
  • CSR:

    devServer: {
      ...
      headers: {
        "Access-Control-Allow-Origin": "*",
        "Access-Control-Allow-Methods": "GET, POST, PUT, DELETE, PATCH, OPTIONS",
        "Access-Control-Allow-Headers": "X-Requested-With, content-type, Authorization"
      }
    }
    

    • CSR: for running the project in the dev side use:

      devServer: {
         historyApiFallback:{
           index:'build/index.html'
         },
      },
      

Answer 2

试着像这样重构代码：

const express = require('express')
const app = express()
const cors = require('cors');


const whitelist = ['http://localhost:3000', 'http://localhost:8082'];


const corsOptionsDelegate = (req, callback) => {
  var corsOptions;
  if (whitelist.indexOf(req.header('Origin')) !== -1) {
    corsOptions = { origin: true };
  } else {
    corsOptions = { origin: false };
  }
  callback(null, corsOptions);
};

const corsWithOptions = cors(corsOptionsDelegate);

app.route('/')
  .options(corsWithOptions, (req, res) => { res.sendStatus(200); })
  .get(cors(), (req, res)=>{
       res.redirect('http://localhost:3000/test')
});


app.listen(8082)

Answer 3

为了方便开发，并使开发环境更接近正式生产环境（不需要使用Access Control-允许-起源降低安全水位），您应该有一个独特的前端和后端切入点起源（http://localhost:3000）。

要实现这一点，请删除所有访问控制-*标题，创建src/setupProxy.js文件并按如下方式填充：

const { createProxyMiddleware } = require("http-proxy-middleware");

module.exports = app => {
  app.use(
    "/api",
    createProxyMiddleware ({
      target: "http://localhost:8082",
      changeOrigin: true
    })
  );
};

然后安装需要的快速中间件作为开发依赖，使用npm安装--save-dev超文本传输协议-proce-middleware

注意：此功能可用于react-scripts@2.0.0及更高版本。

最后，用以/api

• 获取（"http://localhost:8082"）变为获取（'/api'））
• 类似于getch（'http://localhost:8082/some-endpoint'）的东西将成为getch（'/api/thum-endpoint'）

有关这方面的更多信息，请参阅文档。