代码之家 › 专栏 › 技术社区 › Cyrus the Great

通过chrome终端在获取方法中将访问控制允许原点添加到标头

cors google-chrome node.js

Cyrus the Great · 技术社区 · 4 年前

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 我的要求,但不工作!

0 回复 | 直到 4 年前

Sachin Ananthakumar 4 年前

检查我在下面提到的不同案例,您的问题属于案例1,如果您试图从本地或生产中的网站提出请求,您可以参考其他案例。

案例1

"*" 这样地。

来源:“*”

案例2

如果要从本地主机上运行的应用程序向服务器发送请求,请添加“http://localhost:(前端应用程序端口)“到原始属性

来源:“http://localhost:<网站\u port>"

案例3

如果您的前端应用程序部署在某个地方,那么该网站的域应该像下面这样添加到origin属性

来源:“www.mywebsite.com”

案例4

多个网站需要使用API,然后在origin属性中添加一个域数组,如下所示

来源:['domain1','domain2',…]

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')
})

Dharmaraj 4 年前

如果仅在开发时需要将localhost列入白名单,则可以尝试以下操作:

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

在生产中,它只允许您的域和子域。

您在中指定的域 corsOptions 将允许向您的服务器发出请求。在您的情况下,您使用的是浏览器的终端,因此您所在的域将作为原点。既然你有Google open,你必须在你的 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 在这种情况下。

如果您将使用浏览器终端进行测试,那么我建议将原点设置为true,这将允许来自任何原点的请求:

const corsOption = {
  origin: true
}

如果没有Web应用程序,只需要测试API,就考虑使用API客户端。 Postman 或 Insomnia 。您可以在中阅读有关CORS配置的更多信息 documentation .