Блог

Я пытаюсь протестировать CORS на своем простом веб-сервисе.

 var express = require('express')
var cors = require('cors')
var app = express()

var corsOptions = {
    origin: 'http://example.com',
    optionsSuccessStatus: 200 
}

app.get('/products/:id', cors(corsOptions), function (req, res, next) {
    res.json({ msg: 'This is CORS-enabled for only example.com.' })
})

app.listen(80, function () {
    console.log('CORS-enabled web server listening on port 80')
})
 

В терминале chrome с помощью команды fetch я хочу вызвать свою службу :

 fetch("http://localhost/products/1", {   credentials: 'include', headers: {
      'Content-Type': 'application/json', 'Access-Control-Allow-Origin': 'http://example.com'
    },}).then(req => req.text()).then(console.log)
 

но я получил ошибку:

 search:1 Access to fetch at 'http://localhost/products/1' from origin 'https://www.google.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.
VM331:1 GET http://localhost/products/1 net::ERR_FAILED
 

Я добавил Access-Control-Allow-Origin в свой запрос, но это не работает!

Проверьте различные случаи, которые я упомянул ниже, Ваш вопрос подпадает под СЛУЧАЙ 1, Если в случае, если вы пытаетесь сделать запрос с веб-сайта на местном или производственном уровне, вы можете сослаться на другие случаи.

СЛУЧАЙ 1

Если вы планируете делать запросы только с вкладок, лучше всего установить свойство origin внутри corsOption на«*», как это.

происхождение: «*»

СЛУЧАЙ 2

Если вы хотите отправить запрос на сервер из приложения, запущенного на вашем локальном хосте, добавьте «http://localhost:(порт интерфейсного приложения)» в свойство origin

происхождение: «http://localhost:<website_port>»

СЛУЧАЙ 3

Если ваше интерфейсное приложение развернуто где-то, домен этого веб-сайта должен быть добавлен в свойство origin следующим образом

происхождение: «www.mywebsite.com»

СЛУЧАЙ 4

Нескольким веб-сайтам необходимо использовать API, а затем добавить массив доменов в свойство origin следующим образом

происхождение: [‘домен1’, ‘домен2’, …]

 var express = require('express')
var cors = require('cors')
var app = express()

var corsOptions = {
   origin: 'http://localhost:<the port>', //? can be a array of domains too
   optionsSuccessStatus: 200 
}

app.get('/products/:id', cors(corsOptions), function (req, res, next) {
  res.json({ msg: 'This is CORS-enabled for only example.com.' })
})

app.listen(80, function () {
   console.log('CORS-enabled web server listening on port 80')
})
 

Если вам нужно внести в белый список localhost только при разработке, вы можете попробовать следующее:

 const corsOptions = {
  origin: process.env.NODE_ENV === 'DEVELOPMENT' ? true : /https:.*?.?domain.com/,
}
 

В производстве это позволит использовать только ваш домен и поддомены.

Указанному вами домену corsOptions будет разрешено отправлять запросы на ваш сервер. В вашем случае вы используете терминал браузера, и, следовательно, домен, на котором вы находитесь, будет принят за исходный. Поскольку у вас открыт Google, вы должны установить это в своем corOptions :

 const corsOptions = {
   origin: 'https://google.com',
   optionsSuccessStatus: 200 
}
 

Также укажите порт, на котором работает ваше приложение express:

 Access to fetch at 'http://localhost/products/1' from origin 'https://www.google.com' has been blocked by CORS policy
 

URL-адрес должен быть http://localhost:80/products/1 в этом случае.

Если вы будете использовать терминал браузера для тестирования, я бы рекомендовал установить значение origin равным true, что позволит выполнять запросы из любого источника:

 const corsOption = {
  origin: true
}
 

Если у вас нет веб-приложения и вам просто нужно протестировать API, рассмотрите возможность использования API-клиентов, таких как Postman или Insomnia. Вы можете прочитать больше о конфигурации CORS в документации.