即使在设置访问控制 - 允许原孔或其他访问控制之后，也可以在客户端端口错误

Question

我有一个使用 webpack-simple 选项生成的VUE应用程序。我正在尝试使获取请求 https://api.forismatic.com/api/1.0/?method=getQuote&Amp; format = jjson＆amp； amp； amp;lang = en 但是我得到错误：

xmlhttprequest无法加载 https://api.forismatic.com/api/1.0/?method=getQuote& format=json&lang=en 。 对飞行前请求的响应不会传递访问控制检查：否 请求的“访问控制”标头 资源。因此，不允许原点' http://127.0.0.1:8080 ' 访问。

我正在使用vue-resource，并补充说：

Vue.http.headers.common['Access-Control-Allow-Origin'] = '*'

这没有效果。

我还在 devserver 选项中添加了此问题，在 webpack.config.js 中：

devServer: {
  historyApiFallback: true,
  noInfo: true,
  headers: {
    "Access-Control-Allow-Origin": "*"
  }
}

这也不解决问题。错误消息保持不变。

如何解决这个问题？

Answer 1

access-control-allow-origin 是响应服务器必须发送的响应标题。

所有其他访问控制 - *标题是服务器发送的响应标头。

如果您不控制服务器，则您的请求已发送到，而响应的问题仅仅是缺乏 access-control-wall-allow-Origin header或其他 access-control-允许 - *标题，您仍然可以通过CORS代理提出请求来使事情有效。

您可以使用。
您还可以在短短2-3分钟内轻松地将自己的代理部署到Heroku，并带有5个命令：

git clone https://github.com/Rob--W/cors-anywhere.git
cd cors-anywhere/
npm install
heroku create
git push heroku master

运行这些命令后，您最终将自己的cors cors ernhiry Anywhere Server运行，例如， https：// cryptic -headland-94862.Herokuapp.com/。

现在，将请求URL的前缀带有代理的URL：

https://cryptic-headland-94862.herokuapp.com/https://example.com

添加代理URL作为前缀会导致请求通过您的代理制作，其中：

1. 将请求转发到 https://example.com 。
2. 从 https://example.com 接收响应。
3. 将访问 - 控制 - 遵守原始标题添加到响应中。
4. 通过添加的标头通过该响应，回到请求的前端代码。

然后，浏览器允许前端代码访问响应，因为使用 access-control-allow-Origin 响应标头的响应是浏览器所看到的。

即使该请求是触发浏览器执行CORS Preflight Options 请求的请求，因为在这种情况下，代理人还发送回 access-controll-alla-alleaders 和访问控制 - 允许使用方法使前世成功所需的标题。

而且，如果您具有添加 access-control-allow-origin 标题或其他 access-control-allow-*标题的前端代码，请删除该代码 - ＆nbsp ;;因为添加这些请求标头的唯一效果是，您正在触发浏览器发送 cors preflight options 请求而不是实际 get 或 post 在您的代码中。

Answer 2

好的，此答案与问题并不相关，但是对于那些无法触摸API服务器端，免费使用代理 Rob - W/w 的服务

function doCORSRequest(appUrl) {
  const cors_api_url = 'https://cors-anywhere.herokuapp.com/';
  let nUrl = cors_api_url + appUrl;

  fetch(nUrl)
    .then(response => {
      if(response.status !== 200) {
        alert("Error :( try later.")
        return;
      }
      response.json()
        .then(data => showResult(data))
    })
}

doCORSRequest(yourURL);

Answer 3

对于在本地系统上运行Web应用程序，您可以通过添加-Disable-Web-Security标志来禁用Chrome安全功能。

我在Windows上使用以下命令来解决XMLHTTPerror：

cd C:\Program Files\Google\Chrome\Application & chrome.exe "http://localhost:8000/" --user-data-dir="C:\new" --disable-web-security
cd C:\flutter\MyProject\build\web & python -m http.server 8000