Не удается отправить json на экспресс-сервер из браузера
Я установил 2 сервера: первый для фронтенда (localhost:7200), второй для бэкенда (localhost:7300). И есть тестовый запрос от фронтенда к бэкенду, соответственно, по маршруту '/test'.
Проблема в том, что когда я отправляю объект json (при нажатии кнопки «btn»), он отклоняется со следующим сообщением:
Access to XMLHttpRequest at 'http://localhost:7300/test' from origin 'http://localhost:7200' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.
Конечно, я установил заголовок «Access-Control-Allow-Origin» на серверной части (см. ниже).
Это происходит, если я устанавливаю заголовок «Content-Type» как «application/json». Но он отлично работает, если заголовок вообще не установлен или заголовок имеет вид «application/x-www-form-urlencoded» (и, следовательно, отправляемое сообщение не похоже на JSON).
Код на фронтенде
btn.addEventListener('click', () => {
const xhr = new XMLHttpRequest();
xhr.open('POST', 'http://localhost:7300/test', true);
xhr.setRequestHeader('Accept', 'application/json');
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.addEventListener('load', (e) => {
console.info(e.target.responseText);
});
xhr.send(JSON.stringify({name: 'kek'}))
});
Код на бэкенде:
const express = require('express');
const app = express();
const bodyParser = require('body-parser');
app.use(bodyParser.urlencoded({extended: true}))
app.use(bodyParser.json());
app.post('/test', (req, res) => {
res.set('Access-Control-Allow-Origin', '*');
res.set('Access-Control-Allow-Headers', 'Content-Type')
// res.set('Content-Type', 'application/json');
res.header("Content-Type",'application/json');
console.info(req.body)
res.json({success: true});
});
Теперь это работает, спасибо! Но знаете ли вы, почему это не работает, если заголовки устанавливаются вручную?
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Вы можете использовать промежуточное ПО cors. https://expressjs.com/en/resources/middleware/cors.html
var express = require('express')
var cors = require('cors')
var app = express()
app.use(cors())
Это промежуточное ПО автоматически устанавливает заголовки, чтобы избежать проблем с CORS (https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS).
Спасибо. Я отметил другой ответ как решение, но эта статья мне тоже помогла. я проголосовал за твой ответ
Вы устанавливаете заголовки, когда ваш сервер отвечает на запрос POST.
app.post('/test', (req, res) => { res.set('Access-Control-Allow-Origin', '*'); res.set('Access-Control-Allow-Headers', 'Content-Type')
В сообщении об ошибке говорится:
Response to preflight request doesn't pass access control check
Предпечатный запрос — это запрос OPTIONS, а не запрос POST, поэтому заголовки в ответе на него не устанавливаются, и запрос POST никогда не выполняется.
Используйте стандартная cors библиотека промежуточного программного обеспечения. Не изобретайте велосипед.