reactjs - 使用 React 中的 Axios 发出要表达的 http 请求在飞行前失败并出现 CORS 错误。在服务器上启用了 CORS 但仍然无法正常工作

Question

几个月来我一直在开发这个应用程序，并使用 axios 在开发和生产中毫无问题地从我的 React 前端向我的 Express 后端发出 http 请求。昨天，我开始收到“net::ERR_EMPTY_RESPONSE”消息，在检查网络调用后我意识到这是因为它正在进行飞行前的 OPTIONS 请求，然后没有进行后续的实际请求。

我已经包含了 cors express 模块并将它放在我服务器上的路由之上。我专门为所有 OPTIONS 请求创建了中间件，这些请求将设置它们的“Access-Control-” header 以允许所有来源、方法和 header (是的，我知道这是一个漏洞)。在我的 React 应用程序中，我在 package.json 中设置了“代理”:“https://example.com”。即使在完成所有这些之后，我仍然无法让我的 React 应用程序(或浏览器？)与任何“复杂”请求合作(我的理解是任何带有授权 header 的内容都会触发预检)。直到昨天，我一直在从开发(本地主机:3000)和具有相同来源(https://example.com)的生产应用程序成功访问这些 protected 路由。我见过很多其他人遇到过这方面的问题，但他们中没有人无法从生产环境向他们自己的服务器发出网络请求。

   //package.json for React app
   "name": "homebrew",
  "version": "0.1.0",
  "private": true,
  "proxy": "https://example.com",
  "dependencies": {
    "axios": "^0.19.0",
    "gsap": "^2.1.2",
    "jwt-decode": "^2.2.0",
    "react": "^16.8.5",
    "react-dom": "^16.8.5",
    "react-helmet": "^5.2.1",
    "react-router-dom": "^5.0.0",
    "react-scripts": "2.1.8",
    "request": "^2.88.0"
  },

 //Admin component in React App
 componentDidMount(){
        var jwt = JSON.parse(localStorage.getItem('brew-jwt'));

        let config =
        { headers : {
              'Authorization': "Bearer " + jwt,
            }
        }

        console.log(jwt);
        axios.get('https://example.com/admin/submissions',config)
        .then(response =>{
            console.log(response);
        })
        .catch(error=>{
            console.log(error);
        })

   }

  //server.js file
  var port = 443;
  var app = express();



  app.use(cors());

  app.set('views', path.join(__dirname,'views'));
  app.set('view engine', 'ejs');
  app.engine('html', require('ejs').renderFile);

    //Farther down in my server.js file
    app.options('*',function(req,res){
       res.header('Access-Control-Allow-Origin', '*');
       res.header('Access-Control-Allow-Methods', 'GET,PUT,HEAD,POST,PATCH');
       res.header('Access-Control-Allow-Headers', 
       'Authorization,Origin,Referer,Content-Type,Accept,User-Agent');
        res.sendStatus(200);
        res.end();
     });

     app.use('/',index);
     app.use('/users',users);
     app.use('/forgot',forgot);
     app.use('/ingredients',ingredients);
     app.use('/admin',admin);
     app.use('*',index);





The OPTIONS request sends this request to my server:

Access-Control-Request-Headers: authorization,content-type
Access-Control-Request-Method: POST
Origin: http://localhost:3000
Referer: http://localhost:3000/Admin
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/74.0.3729.169 Safari/537.36


The OPTIONS request gets this response from my server:

Request URL: https://example.com/admin/submissions
Request Method: OPTIONS
Status Code: 204 No Content

Access-Control-Allow-Headers: authorization,content-type
Access-Control-Allow-Methods: GET,HEAD,PUT,PATCH,POST,DELETE
Access-Control-Allow-Origin: *

The headers my actual request were to send are:
 Accept,Auhtorization,Content-Type,Origin,Referer,User-Agent
This request is never being sent, though, because I am logging requests on my server and it never receives it. 

Note: I am able to make "simple" network requests from my front-end still, like fetching public resources, images, etc. 

Is this a chrome problem? A react problem? Axios problem? Help!

Answer 1

解决了。问题是我在授权 header 中发送的 jwt(json 网络 token )太大，因为它包含除凭据之外的其他用户数据(实际上是相当多的数据)。当我不小心从本地存储中删除了 token 并仍然尝试请求时，我发现了这一点。它设法发送了 Authorization header ，但它的内容只是“Bearer null”。我登录以再次接收 token 并重新尝试，它给了我看起来像 CORS 的问题。毕竟这不是 CORS 问题。我的请求 header 太大了!

解决方案是在用户登录时发送 2 个 token ；一个小的用户 jwt 将作为授权 header 发送回服务器，一个更大的用户数据 jwt 将保存所有用户保存的数据。当 jwt 太大而无法作为 header 发送时，它会产生 CORS/预检问题的外观，但实际上它没有发出请求的唯一原因是大 header 。很多人可能都遇到了这个问题，但没有意识到这一点(我在任何地方都看到人们为此失去理智)。