Предварительная проверка Express Node.js Cors, проблема 400 net::ERR_FAILED

Я уже несколько часов бьюсь головой о стену... перепробовал все типы комбинаций, чтобы заставить это работать.

У меня есть собственная конечная точка API: https://app.automate.mn/api/tools/email/add

На что я пытаюсь опубликовать данные со сторонних веб-сайтов.

app.js

const express = require('express');
const cors = require('cors');
const app = express();
    
app.use(cors());
app.options('*', cors());

...
    
const {addContact} = require('./routes/api/tools/email');
app.post('/api/tools/email/add', addContact);

addContact.js

addContact: async function (req, res) {

    res.status(200).send('OK - TEST');
    return;
}

Я настроил здесь тестовый сайт с формой: https://demoautomatemn.wpcomstaging.com/

Когда вы отправляете форму, она отправляет данные в конечную точку:

loadForm.js

automate_post_data('https://app.automate.mn/api/tools/email/add', data)
            .then(data => {
                console.log(data); // JSON data parsed by `data.json()` call
            });

async function automate_post_data(url = '', data = {}) {
const response = await fetch(url, {
    method: 'POST',
    mode: 'cors', // no-cors, *cors, same-origin
    headers: {
        'Content-Type': 'application/json',
        'Accept': 'application/json',
    },
    //referrerPolicy: 'origin', // no-referrer, *no-referrer-when-downgrade, origin, origin-when-cross-origin, same-origin, strict-origin, strict-origin-when-cross-origin, unsafe-url
    body: JSON.stringify(data) // body data type must match "Content-Type" header
});

if (!response.ok) {
    throw new Error(`HTTP error! status: ${response.status} - ${response.statusText}`);
}
return response.json();
}

Пост не работает:

Access to fetch at 'https://app.automate.mn/api/tools/email/add' from origin 'https://demoautomatemn.wpcomstaging.com' 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. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.
loadForm.js:109 POST https://app.automate.mn/api/tools/email/add net::ERR_FAILED

введите здесь описание изображения

введите здесь описание изображения

Я ожидал увидеть Access-Control-Allow-Origin в заголовках ответа для вызова OPTION, но ничего (Предварительная проверка не удалась). Я пробовал все, чтобы заставить его работать.

Любые предложения будут приветствоваться прямо сейчас.


express http-status-code-406
person Andy    schedule 30.06.2020    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Хорошо, прогресс, но без сигары!

Я устанавливаю следующее:

Настройка на уровне Apache:

https://docs.bitnami.com/bch/infrastructure/nodejs/administration/enable-cors-nodejs/

Вы также можете найти это полезным: https://enable-cors.org/server_apache.html

Добавление источника в запрос

 headers: {
        'Content-Type': 'application/json',
        'Accept': 'application/json',
        'Origin': window.location.href
    },
referrerPolicy: 'origin',

Это привело к изменению сообщения об ошибке:

Access to fetch at 'https://app.automate.mn/api/tools/email/add' from origin 'https://demoautomatemn.wpcomstaging.com' has been blocked by CORS policy: Request header field content-type is not allowed by Access-Control-Allow-Headers in preflight response.

Обновить Content-Type: application/x-www-form-urlencoded,

Согласно этому сообщению: Почему добавление заголовков CORS к маршруту OPTIONS не позволяет браузерам получить доступ к моему API?

Я обновил запрос до x-www-form-urlencoded

const response = await fetch(url, {
        method: method,
        mode: 'cors', // no-cors, *cors, same-origin
        headers: {
            'Content-Type': 'application/x-www-form-urlencoded',
            'Origin': window.location.href
        },
        referrerPolicy: 'origin', // no-referrer, *no-referrer-when-downgrade, origin, origin-when-cross-origin, same-origin, strict-origin, strict-origin-when-cross-origin, unsafe-url
        body: data // body data type must match "Content-Type" header
    });

Это похоже на прогресс, но я все еще получаю ошибку 406:

POST https://app.automate.mn/api/tools/email/add 406

Response {type: "cors", url: "https://app.automate.mn/api/tools/email/add", redirected: false, status: 406, ok: false, …}
person Andy    schedule 01.07.2020
comment
Добавлено в следующий заголовок и, похоже, работает «Принять»: «application/x-www-form-urlencoded», - person Andy; 01.07.2020