我试图从惠普Alm的REST API中获取一些数据。它使用一个小的curl脚本工作得很好——我得到了我的数据。

现在用JavaScript、fetch和ES6(或多或少)来实现这一点似乎是一个更大的问题。我一直收到这个错误信息:

无法加载获取API。对飞行前请求的响应则不然 pass访问控制检查:没有' access - control - allow - origin '头 显示在所请求的资源上。“http://127.0.0.1:3000”是 因此不允许访问。响应的HTTP状态代码为501。 如果不透明响应满足您的需求,请将请求的模式设置为 'no-cors'获取禁用CORS的资源。

我明白这是因为我试图从我的本地主机内获取数据,解决方案应该使用跨起源资源共享(CORS)。我认为我确实这样做了,但不知为何,它要么忽略了我在头文件中写的内容,要么是其他问题。

那么,是否存在执行问题?我做错了吗?很遗憾,我无法查看服务器日志。我真的有点卡在这里了。

function performSignIn() {

  let headers = new Headers();

  headers.append('Content-Type', 'application/json');
  headers.append('Accept', 'application/json');

  headers.append('Access-Control-Allow-Origin', 'http://localhost:3000');
  headers.append('Access-Control-Allow-Credentials', 'true');

  headers.append('GET', 'POST', 'OPTIONS');

  headers.append('Authorization', 'Basic ' + base64.encode(username + ":" + password));

  fetch(sign_in, {
      //mode: 'no-cors',
      credentials: 'include',
      method: 'POST',
      headers: headers
    })
    .then(response => response.json())
    .then(json => console.log(json))
    .catch(error => console.log('Authorization failed : ' + error.message));
}

我正在使用Chrome浏览器。我也尝试使用Chrome CORS插件,但随后我得到另一个错误消息:

响应中的'Access-Control-Allow-Origin'报头的值 当请求的凭据模式为时,一定不能是通配符'*' “包括”。因此,来源“http://127.0.0.1:3000”是不允许的 访问。对象发起的请求的凭据模式 XMLHttpRequest由withCredentials属性控制。


当前回答

对于Node.js和Express.js后端,我使用这个:)

App.use(函数(req, res, next) { res.header(“Access-Control-Allow-Origin”、“YOUR-DOMAIN.TLD”);//更新到匹配你将发出请求的域 res.header("Access-Control-Allow-Headers", "Origin, x - request - with, Content-Type, Accept"); next (); });

更多详情:CORS在ExpressJS

其他回答

在我的例子中,我必须在所有现有中间件下面添加一个自定义头中间件。我认为一些中间件可能会与Access-Control-Allow-Origin头相冲突,并尝试根据他们的需要来设置它。

所以代码应该是这样的:

app.use(cors());

....all other middleware here

app.use(function (req, res, next) {
  res.header("Access-Control-Allow-Origin", "http://localhost:3000");
  res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
  next();
});
...your routes

使用下面的npm模块。这实际上挽救了生命。

https://www.npmjs.com/package/local-cors-proxy

您将得到一个CORS错误,例如下面的URL

https://www.google.co.in/search/list

在成功安装(local-cors-proxy)后,global npm install -g local-cors-proxy并设置代理URL。 例如,下面的CORS问题进入localhost。因此,需要为CORS问题域添加域名(https://www.google.co.in)和端口(——port 8010)。 欲了解更多,请查看链接 https://www.npmjs.com/package/local-cors-proxy

lcp --proxyUrl https://www.google.co.in --port 8010

设置成功后,它将生成如下所示的本地代理URL。

http://localhost:8010/proxy

在项目API URL中使用该域名。

API完整URL:

http://localhost:8010/proxy/search/list

在您的本地项目中获得CORS问题响应。

在我的例子中,web服务器阻止了“OPTIONS”方法

检查您的web服务器上的options方法

Apache: https://www ibm.com/support/docview.wss?uid=ibm10735209——01. web层:4.4.6禁用Options方法https://docs.oracle.com/cd/E23943_01/web.1111/e10144/getstart.htm#HSADM174 .单击“确定” nginx: https://medium.com/@hariomvashisth / cors-on-nginx-be38dd0e19df

我用的是webtier / www / webtier /域名(域名)/ config / fmwconfig /组件/羟基/ VCWeb1 / httpd . conf

<IfModule mod_rewrite.c>
  RewriteEngine on
  RewriteCond %{REQUEST_METHOD} ^OPTIONS
  RewriteRule .* . [F]
</IfModule>

改变

<IfModule mod_rewrite.c>
  RewriteEngine off
  RewriteCond %{REQUEST_METHOD} ^OPTIONS
  RewriteRule .* . [F]
</IfModule>

对于Node.js和Express.js后端,我使用这个:)

App.use(函数(req, res, next) { res.header(“Access-Control-Allow-Origin”、“YOUR-DOMAIN.TLD”);//更新到匹配你将发出请求的域 res.header("Access-Control-Allow-Headers", "Origin, x - request - with, Content-Type, Accept"); next (); });

更多详情:CORS在ExpressJS

删除:

credentials: 'include',