Я занимаюсь разработкой этого приложения уже несколько месяцев и использую axios, чтобы без проблем отправлять http-запросы от моего внешнего интерфейса React к моему бэкэнду Express как в разработке, так и в производстве. Вчера я начал получать сообщения «net :: ERR_EMPTY_RESPONSE», которые, как я понял после проверки сетевых вызовов, были из-за того, что он выполнял запрос OPTIONS перед полетом, а не выполнял последующий фактический запрос.
Я включил модуль Cors Express и разместил его над моими маршрутами на моем сервере. Я специально создал промежуточное программное обеспечение для всех запросов OPTIONS, которое установит их заголовки «Access-Control-», чтобы разрешить все источники, методы и заголовки (да, я знаю, что это уязвимость). В моем приложении реагирования я установил «proxy»: «https://example.com" внутри моего package.json. Даже после всего этого я все еще не могу заставить свое приложение React (или браузер?) Взаимодействовать с любым« сложным » запросов (насколько я понимаю, все, что связано с заголовками авторизации, вызовет предварительную проверку). Я получал доступ к этим защищенным маршрутам как из разработки (localhost: 3000), так и из производственного приложения с тем же источником (https://example.com) до вчерашнего дня) Я видел много других людей, имеющих проблемы с этим, но ни один из них не смог сделать сетевые запросы на свой собственный сервер с производства.
//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!