cURL 不强制执行 CORS 规则。 出于安全目的，浏览器会强制执行这些规则。

当您提到您添加了相关标头时，我假设您的意思是您将这些标头添加到请求中。 其实服务端的响应头中应该有header，表示允许其他网站直接访问该资源。

仅供参考，CORS - 跨源资源共享。 由于您的 API 不支持它，您有两个选择 -

1. 使用与您的网页位于同一域的代理服务器来访问 4chan 的 API，或者，
2. 在任何其他域上使用代理服务器，但修改响应以包含必要的标头。

我想投票以“不是问题”来结束这个问题。

感谢您的建议。 我已经更新了我的代码以通过代理路由请求：

axios.get('https://a.4cdn.org/a/threads.json', {
    headers: {
      'Access-Control-Allow-Origin': '*',
    },
    proxy: {
      host: '104.236.174.88',
      port: 3128
    }
    }).then(function (response) {
        console.log('response is : ' + response.data);
    }).catch(function (error) {
        if (error.response) {
          console.log(error.response.headers);
        } 
        else if (error.request) {
          console.log(error.request);
        } 
        else {
          console.log(error.message);
        }
    console.log(error.config);
});

但是，我仍然收到此错误：

跨域请求被阻止：同源策略不允许读取https://a.4cdn.org/a/threads.json 上的远程资源

我在 Stack Overflow 上搜索了各种论坛和问题，但似乎找不到任何解决方案。 如果有人能提供一些见解，将不胜感激。

有这方面的消息吗？ 我几乎在同一条船上......

跨域请求被阻止：同源策略不允许读取https://a.4cdn.org/a/threads.json 上的远程资源

这是因为https://a.4cdn.org和https://boards.4chan.org被认为是不同的域。 区别在于a和board

我也遇到同样的问题。 任何人都可以帮我解决这个问题吗

萨阿姆

作为临时解决方案，您可以使用它： https :

我暂时没有找到更好的东西..

@PetitBateau我不确定 Chrome 扩展程序如何帮助通过 axios 发送请求。

@adl1995它对我

Chrome 扩展程序仅对拥有该扩展程序的人有用。 在生产中依赖 Chrome 扩展不是一个好主意，因为不是每个人都有那个扩展。

这就是为什么我说这是一个临时解决方案。 当然，对于开发环境。

Access-Control-Allow-Origin 是一个响应头，而不是请求头：
https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Access-Control-Allow-Origin

axios.get(url, { headers: {'Access-Control-Allow-Origin': *} } ) 没有任何意义！

尝试
axios.get(url, { crossdomain: true })

@ronnin为了记录，我尝试了您的解决方案，但它不起作用。

您向其发出 AJAX 请求的远程服务不接受来自您的域的跨源 AJAX 请求。 如果您有权访问您的网站服务器端代码库，您可以做的一件事是在那里创建一个控制器操作（假设您使用的是 MVC），然后使用它来使用远程服务。 然后，您可以向控制器操作发出 AJAX 请求。 这种方法的一个好处是你可以在联系远程服务之前运行额外的检查，格式化它的响应，甚至缓存它。

读这个，大家。
https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS

我总是发现对那个 MDN 文档的引用不是很有帮助。 它是一份很长的文件，并没有直接解决手头的问题。 如果我无权访问服务器端代码库并想访问此 API，我该怎么办？

我的解决方案是在我的域服务器上创建我自己的 api 来访问任何不允许跨域请求的外部 api，我称之为我的中继器 api。

@JigzPalillo你能分享方法或代码吗？ 我几乎被困住了！ :(

通常这会起作用，但如果它不起作用并且您无权访问该域...

axios.get('https://www.notmydomain.com/1511.json')
    .then(function (response) {
        console.log(response.data);
});

我所做的是在我的服务器上创建一个中继器

axios.get('https://www.mydomain.com/repeater.php?url=https://www.notmydomain.com/1511.json')
    .then(function (response) {
        console.log(response.data);
});

/* repeater.php */
function collect_data($url){
    $ch = curl_init();
    curl_setopt($ch, CURLOPT_FOLLOWLOCATION, true);
    curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false); //remove on upload
    curl_setopt($ch, CURLOPT_URL, $url);
    curl_setopt($ch, CURLOPT_VERBOSE, 1);
    curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
    curl_setopt($ch, CURLOPT_AUTOREFERER, false);
    curl_setopt($ch, CURLOPT_REFERER, "https://www.notmydomain.com");
    curl_setopt($ch, CURLOPT_HTTP_VERSION, CURL_HTTP_VERSION_1_1);
    curl_setopt($ch, CURLOPT_HEADER, 0);
    $result = curl_exec($ch);
    echo curl_error($ch);
    curl_close($ch);
return($result);
}
echo collect_data($_GET["url"]);

服务器需要在选项调用中使用 CORS 标头进行响应。 如果您使用的是 nodejs/express，您可以使用以下命令为所有端点修复此问题：

app.use(function(req, res, next) {
  res.header('Access-Control-Allow-Origin', '*');
  res.header('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept');
  next();
});

但这有点松。 可能想收紧生产。

不过我早就解决了这个问题。 服务器属于 3p 服务，因此不受我控制。 我只是代理了它。 在这方面一切都很好。

谢谢

@steveswork在这里，服务器属于 3p 服务，很遗憾我可以使用 ajax、request.js 但不能使用我更喜欢的 axios 👎

@adl1995碰巧能够解决这个问题吗？ 我完全困惑如何处理这个错误

现在是2018年了，有更新吗？

@challenger532不，仍然没有。

该错误仍然普遍存在。

我的建议：使用不同的库。

好的，这有点解决了我的问题。 你看，我正在使用 vuejs 和 Laravel……我在 php 中设置了我的 Laravel 网络路由，如下所示：

Route::get('distancematrix/{source}/{destination}', function($source,$destination){
 $url = "https://maps.googleapis.com/maps/api/distancematrix/json?units=imperial&origins=$source&destinations=$destination&key=YOUR_API_KEY";
$ch = curl_init();
curl_setopt($ch, CURLOPT_URL, $url);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
curl_setopt($ch, CURLOPT_PROXYPORT, 3128);
curl_setopt($ch, CURLOPT_SSL_VERIFYHOST, 0);
curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, 0);
$response = curl_exec($ch);
curl_close($ch);

return json_decode($response, true);
});

然后 vuejs 文件我只是使用 axios 向我的路由发送请求：

axios.get("distancematrix/place_id:${this.place.source}/place_id:${this.place.destination}").then(response => {
                    console.log('====================================')
                    console.log(response.data)
                    console.log('====================================')
   })

瞧，它工作正常。

如果使用 Laravel，附加功能：

header('Access-Control-Allow-Origin: *');

返回前到控制器或路由
例子：
Route::get('post',function(){ $jav = Blog::all(); header('Access-Control-Allow-Origin: *'); return $jav; });
对不起我的英语不好。 希望这可以帮到你。

我将 vue.js（本地主机端口 8080）和 Flask 用于我的 API（本地主机端口 5000）

我只需要对我的 api 代码（端口 5000 上的 Flask）做一些小改动。
我添加了flask 扩展flask-CORS 并修改了我的代码以使用它。
前：

from flask import Flask, request
import json
app = Flask(__name__)

后：

from flask import Flask, request
import json
from flask_cors import CORS
app = Flask(__name__)
CORS(app)

在此之后，它起作用了，我可以使用我的 API。
所以这不是真正的 axios 问题，而是 API 问题，您从 Firefox 收到警告而不是通过调用 axios.get 函数。

通过设置标头和代理选项，我得到了Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. 。

但是我能够通过这个扩展来解决这个问题： https :

可悲的是，这只在昨天有效，今天无效......我一直在努力弄清楚为什么

在开发模式下使用Webpack 开发服务器避免 _cors_ 的代理请求

在您的 webpack.config 文件中添加

"devServer":{
  "proxy": {
    "/api": {
    "target": 'https://my-target.com',
    "pathRewrite": { '^/api': '' },
    "changeOrigin": true,
    "secure": false
    }
  }
}

上面的例子将代理请求
axios.post(/api/posts/1 ... . . . .
到https://my-target.com/posts/1

上面的 Git 示例，您需要在您的请求中

axios.get('/api/a/threads.json', {
    headers: {
           //  if u have some headers like this
       //  'Authorization': ' Basic //////some values'
    },
    }).then(function (response) {
        console.log('response is : ' + response.data);
    }).catch(function (error) {
        if (error.response) {
          console.log(error.response.headers);
        } 
        else if (error.request) {
          console.log(error.request);
        } 
        else {
          console.log(error.message);
        }
    console.log(error.config);
});

在 webpack.config 文件中......

"devServer":{
  "proxy": {
    "/api": {
    "target": 'https://a.4cdn.org',
    "pathRewrite": { '^/api': '' },
    "changeOrigin": true,
    "secure": false
    }
  }
}

修改后的 webpack 配置代理将像这样更改您的请求..

u can see this in chrome dev tool REQUEST HEADERS
https://a.4cdn.org/a/threads.json 

你可以像这样在 devServer 代理中使用多个路径
在 webpack.config 文件中......

"devServer":{
  "proxy": {
    "/api": {
    "target": 'https://a.4cdn.org',
    "pathRewrite": { '^/api': '' },
    "changeOrigin": true,
    "secure": false
    },
    "/login": {
    "target": 'https://github.com', // for example
    "pathRewrite": { '^/login': '' },
    "changeOrigin": true,
    "secure": false
    },
    "/post": {
    "target": 'https://facebook.com', // for example
    "pathRewrite": { '^/post': '' },
    "changeOrigin": true
    }
  }
}

如果您需要，请使用

    "changeOrigin": true,
    "secure": false

我花了几个小时来修复它，似乎到处都没有帮助。 简单快捷的方法是添加一个名为 Allow-Control-Allow-Origin* 的 chrome 扩展。 https://chrome.google.com/webstore/detail/allow-control-allow-origi/nlfbmbojpeacfghkpbjhddihlkkiljbi?hl=en

只会帮助你，但其他人呢？

不知何故有用： https :

尝试 Vue 和 axios 我显然遇到了同样的问题。

刚刚尝试了sundar6445提供的解决方案，效果很好。
我修改的webpack配置文件在/config/index.js。 我更喜欢修改这个，因为在/build/webpack.dev.conf.js

在里面你会发现

module.exports = {
  dev: { 
...
proxyTable: {},

正如sundar所描述的那样，例如通过类似的方式更改proxyTable

proxyTable: ({
      '/events': {
        "target": 'http://localhost:3000',
        "changeOrigin": true,
        "secure": false
      }
    }),

这意味着以 /events 开头的所有内容都将路由到http://localhost :3000/events。 在我的情况下没有 'pathRewrite'，相对 url 将是相同的。

当然，不要忘记删除 Vue 组件中的完整 URL。 我有：

  mounted () {
    axios.get('http://localhost:3000/events/nb')
      .then(result => {
        this.new_et_nb = result.data
        console.log('*******' + JSON.stringify(result) + ', ' + result.data)
      }, error => {
        console.error(error)
      })
  }

它成为了：

  mounted () {
    axios.get('/events/nb')
      .then(result => {
        this.new_et_nb = result.data
        console.log('*******' + JSON.stringify(result) + ', ' + result.data)
      }, error => {
        console.error(error)
      })
  }

它运行良好。 感谢@sundar6445

希望这可以帮助

我知道这被标记为关闭，但我想指出一些事情。 如果您的 API 密钥已过期或被其他人使用，有时此错误会出现在客户端。

对于更有经验的开发人员来说，这可能不言而喻，但对于那些不熟悉编码的人，请确保您拥有唯一的 API 密钥。 并非所有 API 都需要唯一密钥，但如果需要，您肯定会需要它。 请参阅特定 API 的 API 文档以了解它们的要求。

Axios 中没有crossDomain选项。 请在提供/使用错误线索之前研究源代码。

您不能在客户端上执行 JavaScript（不禁用 CORS 并使您成为 XSS 的目标）以从另一个站点检索信息。

这是为了防止您访问客户的浏览器并可能耗尽他们的银行账户或在未经他们许可的情况下发布到某些网站。 抓取站点也是如此（这基本上是操作员试图做的）。

您可以使用带有 CORS 模块的服务器抓取网络（即获取数据），并通过该服务器进行代理。

我认为这个标题配置将解决这个问题。

headers: { 'content-type': 'application/x-www-form-urlencoded' }

谢谢

我知道这听起来很陈词滥调，但我对这个问题的解决方案是创建一个自定义 api 来处理这个调用。

问题不在于 axios。 问题出在服务器上。 当您提供数据时，您必须在发送之前添加以下标头。

Access-Control-Allow-Origin 必须设置为 *

Access-Control-Allow-Headers 必须设置为 Origin、X-Requested-With、Content-Type、Accept

来源：进行 axios.get 调用时出现 CORS 错误

参考这些答案，我将这些行添加到我的后端快速服务器中，如下所示：

app.use(function(req, res, next) {
    res.header("Access-Control-Allow-Origin", "http://127.0.0.1:8080"); //My frontend APP domain
    res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE');
    res.header('Access-Control-Allow-Headers', 'Content-Type, Authorization');
    next();
});`

来源： ExpressJS 上的 CORS

一切对我来说都很好，在 axios 或前端没有任何额外的配置，所以这真的不是 axios 问题，而是缺少服务器端头配置。

最后，我认为关于 stackoverflow 的另一个

如何避免 CORS 预检
如何使用 CORS 代理解决“No Access-Control-Allow-Origin header”问题
如何解决“Access-Control-Allow-Origin 标头不能是通配符”问题

希望能帮助到你。

如果您想从其 CORS 标头有问题（缺少或包含多个值）的第三方 api 或 url 获取数据，我认为唯一的解决方案是使用此链接
“ https://cors-anywhere.herokuapp.com/ ”
我将链接用于小型项目，但对于大型项目，您可能希望创建自己的 api 来处理调用并创建 api 您可以使用开源项目https://github.com/Rob--W/cors-anywhere / .

这将工作：

axios.get(`${'https://cors-anywhere.herokuapp.com/'}https://a.4cdn.org/a/threads.json`)
.then(res => {
  console.log(res)
})

前段时间我在创建4webm和4chan-list-webm时遇到了这个问题

值得注意的是，如果您制作浏览器插件，则不需要玩标题来命中 API。 也许如果我们召唤@moot，他会启用 CORS :smile:

跨域：真

我必须在后端 CORS 上启用端口“8080”，然后它才能工作。

安全的

更好地理解 webpack 文档： https: //webpack.js.org/configuration/dev-server/#devserver -proxy

如果您在后端 API 中使用 laravel 或 lumen。 而且您已经在使用 barryvdh/laravel-cors 包。 解决方案是将您的 cors.php 配置设置为标题、方法和原点部分，如下所示
'allowedOrigins' => ['*'], 'allowedHeaders' => ['*'], 'allowedMethods' => ['*'],
希望它能解决某人的问题

如果您在 safari 中执行此操作，则无需时间，只需从“首选项”>>“高级”中启用开发人员菜单，然后从开发菜单中选择“禁用跨域限制”。 如果你只想要本地，那么你只需要启用开发者菜单，并从开发菜单中选择“禁用本地文件限制”。

并在 OSX 版 Chrome 中打开终端并运行：

$ open -a Google\ Chrome --args --disable-web-security --user-data-dir

--user-data-dir 在 OSX 上的 Chrome 49+ 上需要

对于 Linux 运行：

$ google-chrome --disable-web-security
此外，如果您出于 AJAX 或 JSON 等开发目的尝试访问本地文件，也可以使用此标志。

-–allow-file-access-from-files
对于 Windows，进入命令提示符并进入 Chrome.exe 所在的文件夹并键入

chrome.exe --disable-web-security
这应该禁用同源策略并允许您访问本地文件。

尝试了上面提到的所有解决方案。 没有任何效果。
终于找到了一个 - https://github.com/expressjs/cors
我希望它可以帮助你们

主要问题是服务器请求和客户端请求之间的区别。

当您通过客户端（也就是大部分时间，浏览器）发出请求时，您会受到浏览器软件的支配。 浏览器软件的标准是防止任何可能来自也可能不是来自您自己的软件的恶意活动的尝试。

如果您从自己的服务器（也不是浏览器客户端）发出请求，那么对于您自己编写的代码，没有人（取决于您的服务器设置）可以访问或控制它，您知道什么各种请求都是传出的，因此无需担心在您的环境或您的知识之外发生的网络调用。

这就是为什么浏览器对跨源请求很严格的原因，特别是因为一旦您的公共代码在客户端上，您就无法控制谁可以看到它/谁可以操作它。 如果您的前端应用程序受到威胁，并且某些恶意软件能够以牺牲访问者/用户的利益为代价对您的代码进行网络调用，他们希望确保不会发生这种情况。 因此，您的 mydomain.com 不能调用 allyourdataarebelongtome.com，以防万一您不希望它发生。

这里的解决方案不是跨域请求不起作用 - 要么是您自己的服务器阻止了这种情况，您需要在接受源域时适应这种情况，要么是您尝试向其进行 API 调用的第三方服务器在该跨域请求之上还有一些其他的身份验证/授权方法。

@mddanishyusuf解决方案对我

我认为这个标题配置将解决这个问题。

headers: { 'content-type': 'application/x-www-form-urlencoded' }

谢谢

谢谢！ ;)

从这里： https :

所以我尝试通过在我的网站上创建我自己的 API 来解决这个问题。 我刚刚发送了这样的请求

axios.get('/sample/request')

然后http://127.0.0.1 :8080/sample/request 将发送另一个请求到https://a.4cdn.org/并将响应作为 json 返回给 axios。

这对我有用，希望它可以帮助你

https://github.com/axios/axios/issues/853#issuecomment -408218917 使用fetch API 和 .NET 4.5 Web API。

据我了解，问题是请求从loclahost:3000发送到loclahost:8080并且浏览器拒绝诸如 CORS 之类的请求。 所以解决方案是创建代理，浏览器将处理来自一台服务器的请求。
如果我错了纠正我

我的解决方案是：
从“http-proxy-middleware”导入代理
app.use('/api/**', proxy({ target: "http://localhost:8080" }));

我遇到了同样的问题，我在后端（Express）中安装了“cors”来解决它。

跑：
npm 安装 cors

然后只需设置：

var cors = require('cors');
app.use(cors());

谢谢@fernandoruch ，这是与我的 nodejs 服务器一起使用的

我有同样的问题并解决了它

app.use((req, res, next) => {
  res.header('Access-Control-Allow-Origin', '*');
  res.header('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept');
  next();
});

起初工作，但后来它停止了，我不知道为什么。

然后我意识到我将所有代码移动到另一个文件中，所以我需要使用路由器：

router.use((req, res, next) => {
  res.header('Access-Control-Allow-Origin', '*');
  res.header('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept');
  next();
});

你好，

关于此问题的任何更新，我使用的是 .net core 2.1 和 axios 0.18。

谢谢。

我不认为问题出在 axios 上，问题出在您的后端服务器上。

对我来说，我有一个在后端使用 Flask 并在 Vue.JS 中使用 axios 的架构，我唯一需要在 Flask 服务器上做的是：

...
from flask_cors import CORS
...
CORS(app)

不过，这不应该投入生产，您也可以在 nginx 级别拥有跨源允许列表。 我通读了这个，可能会有所帮助。

作为临时解决方案，您可以使用它： https :

我暂时没有找到更好的东西..

馊主意

当我试图简单地向 Darksky 天气 api 发出axios.get()请求时遇到了这个问题。 当我阅读 Darksky 的常见问题解答页面时，我发现了一个关于同样问题的问题，他们回答说他们将此作为安全措施来防止无意中恶意访问他们的信息，并建议创建一个代理来访问他们的数据库。

我对package.json文件进行了以下更改（我正在使用 create-react-app）：

{
  "proxy": "https://api.darksky.net/forecast/[myKey]
}

myKey是 Darksky 提供给我的，用于访问他们的数据。

这是一个超级简单的修复方法，对我有用！ 我怀疑许多 api 服务将开始使用它作为安全措施。 希望我的解决方案可以帮助其他有类似问题的人。

总结：创建一个代理。

谢谢@fernandoruch 。 当我将它添加到我的 node.js 服务器的 app.js 时，它对我有用

var cors = require('cors');
app.use(cors());

import axios from 'axios'
import jsonpAdapter from 'axios-jsonp'

axios.get(`${url}`, { adapter: jsonpAdapter })
        .then(result => {
            console.log('Status Code: ' + result.status)
        })
        .catch(error => console.log('Request failed'))

JSONP（JSON with Padding 或 JSON-P）用于从与客户端位于不同域的服务器请求数据。 JSONP 支持绕过同源策略共享数据。

我只是使用 jquery 的 $.get 进行外部 api 调用。

如果您想从其 CORS 标头有问题（缺少或包含多个值）的第三方 api 或 url 获取数据，我认为唯一的解决方案是使用此链接
“ https://cors-anywhere.herokuapp.com/ ”
我将链接用于小型项目，但对于大型项目，您可能希望创建自己的 api 来处理调用并创建 api 您可以使用开源项目https://github.com/Rob--W/cors-anywhere / .

这将工作：

axios.get(`${'https://cors-anywhere.herokuapp.com/'}https://a.4cdn.org/a/threads.json`)
.then(res => {
  console.log(res)
})

@yasincidem - 你是这个建议的绝对钻石。 干杯 - 我已经在网上寻找解决方案的许多线索，而你的方法是第一个适用于我的特定场景的方法。

我刚刚遇到了这个问题。 我有{withCredentials: true} （从我的其他 API 复制和粘贴）让这个特定的 3rd 方 API 工作我只是删除了{withCredentials: true}

这个解决方案对我有用

axios.get(myurl, {
    crossDomain: true
}).then(res => { 
    console.log(res);
}).catch(error => {
    console.log('error', error);
})

参考https://stackoverflow.com/questions/42422494/cross-domain-at-axios

如果您想从其 CORS 标头有问题（缺少或包含多个值）的第三方 api 或 url 获取数据，我认为唯一的解决方案是使用此链接
“ https://cors-anywhere.herokuapp.com/ ”
我将链接用于小型项目，但对于大型项目，您可能希望创建自己的 api 来处理调用并创建 api 您可以使用开源项目https://github.com/Rob--W/cors-anywhere / .

这将工作：

axios.get(`${'https://cors-anywhere.herokuapp.com/'}https://a.4cdn.org/a/threads.json`)
.then(res => {
  console.log(res)
})

非常好用！！！

我们在切换到 axios 时也遇到了这个问题
我们的设置是 webpack + devServer（带代理）+ axios

问题是我们在 axios 中使用了完整的 api url 作为 baseURL 而不是 '/api' （代理通过目标属性进行映射）

在我看来，这可能是由于我们自己的错误。 我遇到了与上述相同的问题。 2天我花时间寻找这个问题。 事实证明这只是我发现的一个小问题。 我输入的url地址与解析文档不符。 现在 axios 在我的 angular 7 上完美运行

检查烧瓶或其他服务器是否启用了 CORS。
还要检查服务器地址是否正确。我只是因为忘记添加服务器端口而卡住了。
axios.get('http://localhost:5000/jsonshow')
.then(response => (this.array= response))

将“ localhost:3000 ”更改为“ http://localhost :300” 对我来说工作正常（确保在服务器端启用cors）

将“ localhost:3000 ”更改为“ http://localhost :300” 对我来说工作正常（确保在服务器端启用cors）

如果您在端口 300 而不是 3000 上运行。

在VueJS中，如果项目不存在，您可以在项目的根目录创建一个名为vue.config.js的邪恶文件，并添加类似的内容

module.exports = {
  devServer: {proxy: 'http://localhost:3000'}
}

然后你的Axios电话应该看起来像

axios.get('/api/say_hello', {})

如果您想从其 CORS 标头有问题（缺少或包含多个值）的第三方 api 或 url 获取数据，我认为唯一的解决方案是使用此链接
“ https://cors-anywhere.herokuapp.com/ ”
我将链接用于小型项目，但对于大型项目，您可能希望创建自己的 api 来处理调用并创建 api 您可以使用开源项目https://github.com/Rob--W/cors-anywhere / .

这将工作：

axios.get( ${'https://cors-anywhere.herokuapp.com/'}https://a.4cdn.org/a/threads.json )
.then(res => {
控制台日志（res）
})

这个对我有用！ 谢谢！

试试这个：

import Vue from 'vue';
import App from './App.vue';
import router from './router';
import axios from 'axios';

Vue.config.productionTip = false;

// ======================
axios.defaults.withCredentials = false;
axios.defaults.proxy = {
  host: 'http://localhost',
  port: 5000,
};
// ======================
new Vue({
  router,
  render: (h) => h(App),
}).$mount('#app');

如果您想从其 CORS 标头有问题（缺少或包含多个值）的第三方 api 或 url 获取数据，我认为唯一的解决方案是使用此链接
“ https://cors-anywhere.herokuapp.com/ ”
我将链接用于小型项目，但对于大型项目，您可能希望创建自己的 api 来处理调用并创建 api 您可以使用开源项目https://github.com/Rob--W/cors-anywhere / .

这将工作：

axios.get(`${'https://cors-anywhere.herokuapp.com/'}https://a.4cdn.org/a/threads.json`)
.then(res => {
  console.log(res)
})

节省我的时间，非常感谢！

@ronnin为了记录，我尝试了您的解决方案，但它不起作用。

什么？ 真的吗？ 对我来说它绝对有效......
对于 GET 方法，它就像一个魅力！

这是我使用公共 API 制作的示例，基于@ronnin评论：
axios.get('https://world.openfoodfacts.org/api/v0/products', { crossdomain: true }) .then(function (response) { console.log(response.data); })

现在是2019年了，有更新吗？ 😃

我使用这个 chrome 扩展来开发我的应用程序
https://chrome.google.com/webstore/detail/allow-control-allow-origi/nlfbmbojpeacfghkpbjhddihlkkiljbi

@ronnin为了记录，我尝试了您的解决方案，但它不起作用。

遇到麻烦的男士，对 CORS 不太了解，应该阅读前面提到的@seungha-kim 文章： https :

作为总结：

1. 您请求的远程资源，如果与请求的主机不在同一台主机上（所谓的：源），则必须提供额外的 CORS 标头以及资源，也就是。 访问控制允许：主机（来源）、标头、方法等。
2. 通过浏览器或curl请求标题为 'Access-Control-Request-Method' ，使用方法 'OPTIONS' 的请求将在预期方法之前自动尝试：'GET'、'POST' 等。
   这意味着远程资源的处理程序必须专门处理方法 'OPTION'。 例如（nginx）：
   ``时髦的
   位置/远程资源{
   如果（$request_method = 'OPTIONS'）{
   add_header 'Access-Control-Allow-Origin' $http_origin;
   add_header 'Access-Control-Allow-Headers' 'DNT,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization';
   add_header 'Access-Control-Allow-Methods' 'OPTIONS, GET, POST, PUT, PATCH, DELETE';
   add_header 'Access-Control-Allow-Credentials' true;
   add_header 'Access-Control-Max-Age' 1728000; # 20 天

    add_header 'Content-Type' 'text/plain charset=UTF-8';
    add_header 'Content-Length' 0;
   return 204;
  }
 // more ...

}
``

1. 如上所述，我没有对每个 Access-Control-Allow-* 标头使用值 *。
   value *，有很多限制。
   一种。 值 * 到 Access-Control-Allow-Origin,Access-Control-Allow-Headers,Access-Control-Allow-Methods 不能与 Access-Control-Allow-Credentials=true 一起使用。 如果请求需要 cookie，则需要 Access-Control-Allow-Credentials=true
   湾只有 * 有效，*.google.com 无效

1. Access-Control-Allow-Headers 是您的请求的标头列表，可能还包括。 存在一些未列在其中的标题会让您被阻止。 只需检查并选择标题进入 Access-Control-Allow-Headers

2. 问题主要不在于客户端（浏览器，您的客户端应用程序），而是位于服务器请求的资源中。

3. 与您的服务器端开发伙伴交谈

希望它有帮助

@ronnin ：如果我从你的观点中理解正确，这意味着如果我的 GET 请求是从某个服务器请求资源，而他们没有启用 CORS，基本上我们从前端无能为力，对吗？

@ronnin ：如果我从你的观点中理解正确，这意味着如果我的 GET 请求是从某个服务器请求资源，而他们没有启用 CORS，基本上我们从前端无能为力，对吗？

使用下面的应用程序使您的请求有效

即使服务器没有启用 CORS，它也对我

https://cors-anywhere.herokuapp.com/

用法 ：

url = https://cors-anywhere.herokuapp.com${url} ;
`

@ronnin ：如果我从你的观点中理解正确，这意味着如果我的 GET 请求是从某个服务器请求资源，而他们没有启用 CORS，基本上我们从前端无能为力，对吗？

如果我的 GET 请求是从某个他们没有启用 CORS 的服务器请求资源，基本上我们无法从前端直接通过XHR 请求（又名。AJAX 请求）做任何事情。 是的！
浏览器遵循协议并拒绝您的请求。
但是，您可以通过传统的浏览器请求获取资源，例如 location.href、iframe、form.action

大多数情况下，我们设置了一个自有的反向代理服务器（如 nginx），具有自控服务器端，以解决在未启用 CORS 的情况下请求 3-rd 资源的问题。
@ndjerrou提到的 Heroku 应用程序就是这种情况。

我们有自动驾驶汽车和人工智能，但仍在为 CORS 苦苦挣扎

我设法使用 heroku 作为代理解决了这个问题。

这是我的代码；

fetch("https://cors-anywhere.herokuapp.com/boards.4chan.org/biz/thread/13932651.json")
           .then(res => { //returns a readable stream
                  res.body.getReader().read().then(r => { //returns a Uint8 buffer array
                       var result = new TextDecoder("utf-8").decode(r.value); //Decodes the buffer array into a string
                           console.log(JSON.parse(result)) //the result you want
                   })
            })

现在是2020年了，有更新吗？ 😃

可以确认，它是 2020 年，仍然没有更新。
fetch() 有mode: 'no-cors'模式，为什么 axios 没有类似的东西？

我试过

'Access-Control-Allow-Origin': '*',
'Access-Control-Allow-Headers': 'Origin, X-Requested-With, Content-Type, Accept'

这些标题都不起作用。 我在 true 和 false 状态下都尝试了withCredentials ，但没有用。

有了 fetch，它就可以工作。

如果我不想处理CORS政策并且仍然使用axios，我该怎么办？
编辑：另外，为什么这个问题被关闭了？ 显然，我们在这方面仍然存在问题。

您需要在响应标头中而不是在请求标头中定义 'Access-Control-Allow-Origin': 'YOUR_IP:YOUR_PORT' 。

可以确认，它是 2020 年，仍然没有更新。
fetch() 有mode: 'no-cors'模式，为什么 axios 没有类似的东西？

我试过

'Access-Control-Allow-Origin': '*',
'Access-Control-Allow-Headers': 'Origin, X-Requested-With, Content-Type, Accept'

这些标题都不起作用。 我在 true 和 false 状态下都尝试了withCredentials ，但没有用。

有了 fetch，它就可以工作。

如果我不想处理CORS政策并且仍然使用axios，我该怎么办？
编辑：另外，为什么这个问题被关闭了？ 显然，我们在这方面仍然存在问题。

axios 没有问题，这就是问题被关闭的原因。 坐在椅子上阅读 MDN 上的文章： https :

南辕北辙，徒劳无功

谢谢你们，这有帮助！ 给您带来不便请见谅！

当我在我的设备移动热点上时，我在 axios 上遇到了这个错误。 然后当我在咖啡店使用 WiFi 时，我没有得到 CORB

我尝试使用 Wikipedia API 并遇到了同样的问题。
将origin=*到 URL 修复了它。

const endpoint = `https://en.wikipedia.org/w/api.php?action=query&origin=*&list=search&srsearch=${searchTerm}&format=json`;

我通过不使用 axios 来解决它，尝试使用 $ajax 和 $get 从外部 URL 获取 GET，对旧的 jquery 内容没有问题。 肯定是BUG。

现在是2021年了，有更新吗？ 😃

我在尝试从 axios (0.18.0) 和 chrome (75.0.3770.100) 访问 zapier webhook 时遇到了类似的“Access-Control-Allow-Headers”相关问题。

我的要求是：

axios.post("https://hooks.zapier.com/hooks/catch/xxx/xxxx", { email });

我将收到有关不受支持的标头的错误消息：

被 CORS 策略阻止：预检响应中的 Access-Control-Allow-Headers 不允许请求标头字段内容类型

阅读完本页后，我的理解是：

• 1. Zapier 需要配置他们的服务器响应以支持至少“内容类型”的 Access-Control-Request-Headers
• 1. 我需要配置我的请求，以在预检 OPT 期间以某种方式排除“内容类型”标头检查。

是否有任何建议可以实现选项 2？ Zapier关于 Access-Control-Request-Headers的

编辑：我相信这与 axios 几乎没有/没有关系，而是在 Zapier 的支持上很差。 在切换到带有 URL 参数的 GET 后，该请求似乎有效。

好吧，如果在常见问题解答中他们提到您不需要任何内容​​类型参数
可以试试ol
var xhr = new XMLHTTPRequest() 并在没有 axios 的情况下尝试这种方式。

你的帖子是在客户端还是服务器上的 webhook 上发布的？

在星期二，2019年6月25日，下午3时27分皮特施米茨[email protected]写道：

我遇到了类似的“Access-Control-Allow-Headers”相关问题
尝试从 axios (0.18.0) 和 chrome 访问 zapier webhook
(75.0.3770.100)。

我的要求是：

axios.post("https://hooks.zapier.com/hooks/catch/xxx/xxxx", { email });

我将收到有关不受支持的标头的错误消息：

被 CORS 策略阻止：不允许请求标头字段内容类型
通过预检响应中的 Access-Control-Allow-Headers

[图像：图像]
https://user-images.githubusercontent.com/3190970/60138000-9ccdda80-975d-11e9-8f6d-e47bcffe91f1.png

阅读完本页后，我的理解是：

——
1. Zapier 需要配置他们的服务器响应来支持
至少为“内容类型”的访问控制请求头
——
1. 我需要配置我的请求以某种方式排除
预检 OPT 期间的“内容类型”标头检查。

是否有任何建议可以实现选项 2？ Zapier的常见问题
关于访问控制请求头
https://zapier.com/help/common-problems-webhooks/#posting-json-from-web-browser-access-control-allow-headers-in-preflight-response-error
建议“不要自定义您的请求的内容类型”。 但是，我
我的请求中没有任何标头选项，也没有任何默认标头
配置为 axios，所以我只能假设这是在 axios 端隐含的？

—
您收到此消息是因为您发表了评论。
直接回复本邮件，在GitHub上查看
https://github.com/axios/axios/issues/853?email_source=notifications&email_token=AHVHGUIDC6DW3YPEKZ2HHZTP4KLWHA5CNFSM4DIVKOX2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXWZissue502000000000000000000000000000000000000000000001
或静音线程
https://github.com/notifications/unsubscribe-auth/AHVHGUKX32PVCFPCZGRURD3P4KLWHANCNFSM4DIVKOXQ
.

有这方面的消息吗？ 我几乎在同一条船上。

@imranimu问题在于您使用的浏览器和您向其发出请求的服务器的组合。 axios 对此无能为力，除非浏览器公开一个 API，让它忽略 CORS 检查。

您有几个选择：

如果您控制所请求的服务器，请允许它使用以下标头响应所有OPTIONS请求：

Access-Control-Allow-Origin: https://www.mywebsite.com <<REPLACE WITH YOUR SITE - USE COMMA IF MORE THAN ONE>>
Access-Control-Allow-Methods: GET,PUT,POST,DELETE,OPTIONS
Access-Control-Allow-Headers: Access-Control-Allow-Origin

使用 express 这可能看起来像这样，放置在中间件链中的其他路由之前：

app.options('/*', (req, res, next) => {
    res.header('Access-Control-Allow-Origin', 'https://www.mywebsite.com');
    res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE,OPTIONS');
    res.header('Access-Control-Allow-Headers', 'Access-Control-Allow-Origin');
    res.send(HttpStatusCode.OK);
});

您还必须在响应中附加一个标头Access-Control-Allow-Origin: https://www.mywebsite.com' <<replace with your website or list of sites>> 。

app.get('/my-cors-friendly-route', async (req, res, next) => {
   const data = await this.http.get('https://www.someothersite.com');
   res.append('Access-Control-Allow-Origin', 'https://www.mywebsite.com');
   res.json(data)
});

简而言之，浏览器知道您何时请求不同来源（域）上的资源，因此它会发送预检检查（使用 OPTIONS 请求方法类型，而不是 GET、POST 等），以查看服务器是否表示可以接收请求。 这是一种基本的浏览器安全措施，可减少 3rd 方网站使用您的 API 的机会 - 您可能不希望这样做。 上面的代码基本上只是说特定网站可以使用API​​。 如果所有网站都可以使用它，则应设置Access-Control-Origin: * 。

或者，如果您不控制向其发出请求的服务器，则在为页面提供服务的服务器上公开一个路由，该路由为您发出（代理）请求。 这是有效的，因为公开的路由与您的应用程序具有相同的来源（域），因此不会强制执行 CORS 策略，并且您公开路由的服务器不是浏览器，因此不会收到 CORS 错误。

@Aitchy13我要连接的 API 服务器有Access-Control-Origin: * ，控制台给我这个错误，就像这个问题一样，

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at ‘https://<my_api_host>/Data/Login/’. (Reason: Credential is not supported if the CORS header ‘Access-Control-Allow-Origin’ is ‘*’).

你还说，补充...

res.header('Access-Control-Allow-Headers', 'Access-Control-Allow-Origin');

...但不是Access-Control-Allow-Origin仅用于响应而不是请求吗？

不支持如果Access-Control-Allow-Origin : * ... 很奇怪。

以下是一些 API 的响应标头，供参考，以帮助未来可能的解决方案：

（这是由于 CORS 被拒绝的实际请求之前的OPTIONS方法请求）
响应头

HTTP/1.1 204 No Content
Date: Fri, 28 Jun 2022 04:08:58 GMT
Server: Apache
X-DNS-Prefetch-Control: off
X-Frame-Options: SAMEORIGIN
Strict-Transport-Security: max-age=15552000; includeSubDomains
X-Download-Options: noopen
X-Content-Type-Options: nosniff
X-XSS-Protection: 1; mode=block
Surrogate-Control: no-store
Cache-Control: no-store, no-cache, must-revalidate, proxy-revalidate
Pragma: no-cache
Expires: 0

Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: GET,HEAD,PUT,PATCH,POST,DELETE
Access-Control-Allow-Headers: api-key,content-type

Vary: Access-Control-Request-Headers
Keep-Alive: timeout=5, max=100
Connection: Keep-Alive

还是我有什么问题？ 正要因为这个问题把我的笔记本电脑折成两半。

我遇到了同样的问题，经过多次尝试，测试了一些解决方案，没有一个奏效。 只有在 package.json 中设置代理之后。
补充：
"proxy": "api 地址"
它将绕过cors。

@IkarosFeitosa你能发布你的配置代理配置吗？

@zacharytyhacz当服务器以Access-Control-Allow-Origin: *响应时，您无法发送浏览器凭据。

任何一个：

1. 将*更改为特定的网站地址。
2. 在您使用的 axios 请求函数的 config/options 参数中设置...withCredentials: false 。
3. 将您正在使用的 axios 请求函数的 config/options 参数中的 proxy 属性设置为有效的代理（示例如下）

proxy: {
    host: '127.0.0.1',
    port: 9000,
    auth: {
      username: 'mikeymike',
      password: 'rapunz3l'
    }

任何进展？ 我配置我的网络服务器来设置 resposne 标头，但它似乎不起作用。

我很困惑这个错误提示：

CORS 应该是网络浏览器限制，它需要服务器返回允许，我已经允许这个 cors，但是浏览器告诉我No 'Access-Control-Allow-Origin' header is present on the requested resource 。

我使用 fetch api 尝试我的服务器 cors 配置，它运行良好。

如果您将nodejs与express一起使用。 那个帖子可能对你有帮助。

例如，如果您只希望某些路径允许 cors：
/home/fridge - 不允许来自其他来源
/home/toilet - 应该允许来自其他来源

您可以尝试以下实现（对我有用）

在路由/home.js

const express = require('express')
const router  = express.Router()

router.options("/toilet", function(req, res, next){
  res.header('Access-Control-Allow-Origin', '*');
  res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE,OPTIONS');
  res.header('Access-Control-Allow-Headers', 'Content-Type, Authorization, Content-Length, X-Requested-With');
  res.send(200);
});

如果您不将nodejs与express一起使用 - 尝试使用谷歌搜索OPTIONS方法请求

从快递测试：4.16.3

不，:) 开发时有问题（我们使用http）
当我们在服务器上发布时（我们使用 https）
它没有发生。
所以只需安装插件： https :

app.use(function(req, res, next) {
res.header('Access-Control-Allow-Origin', '*');
res.header('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept');
下一个（）;
});

这解决了我的生活！！

感谢您的建议。 我已经更新了我的代码以通过代理路由请求：

axios.get('https://a.4cdn.org/a/threads.json', {
  headers: {
    'Access-Control-Allow-Origin': '*',
  },
  proxy: {
    host: '104.236.174.88',
    port: 3128
  }
  }).then(function (response) {
      console.log('response is : ' + response.data);
  }).catch(function (error) {
      if (error.response) {
        console.log(error.response.headers);
      } 
      else if (error.request) {
        console.log(error.request);
      } 
      else {
        console.log(error.message);
      }
  console.log(error.config);
});

但是，我仍然收到此错误：

跨域请求被阻止：同源策略不允许读取https://a.4cdn.org/a/threads.json 上的远程资源https://boards.4chan.org ”不匹配）。

我在 Stack Overflow 上搜索了各种论坛和问题，但似乎找不到任何解决方案。 如果有人能提供一些见解，将不胜感激。

大家好，在 axios 调用之前试试这个，它对我有用

headers.set('Content-Type', 'application/json')

这是我的解决方案

const key = 'sdmhfkhskdfhkshdkfhsdhfksl';
    const locationUrl = `https://api.fjdsghfjsdghfjgshdjfg`;
    axios.defaults.headers.common['x-api-key'] = key;
    const myresult = await axios.get(locationUrl, { crossdomain: true }).then((result) => {
        return result.data;
    });

我将创建一个关于如何解决这个 CORS 问题的视频。 我将使用指向我的 YouTube 视频的链接更新此评论。

编辑：
https://youtu.be/hxyp_LkKDdk

现在是2021年了，有更新吗？ 😃

是的，我非常喜欢我的狗屎，我真的不得不检查那一年的狗屎😆

只需使用fetch来测试服务器的 cors 是否首先工作。

和...

axios可以请求我的koa-server ，但不能直接请求iris ，它们都支持流行的 cors-middleware。

1358

为什么官方没有解决这个问题？ 我通读了整篇文章，并对似乎没有人真正以任何标准方式解决的普遍问题感到困惑。

为什么官方没有解决这个问题？ 我通读了整篇文章，并对似乎没有人真正以任何标准方式解决的普遍问题感到困惑。

整个 CORS 问题不是 Axios，甚至不是 JavaScript 本身。 这是大多数或所有浏览器内置的安全功能。 有很多方法可以“破解”它，但由服务器来响应正确的标头。

为什么官方没有解决这个问题？ 我通读了整篇文章，并对似乎没有人真正以任何标准方式解决的普遍问题感到困惑。

整个 CORS 问题不是 Axios，甚至不是 JavaScript 本身。 这是大多数或所有浏览器内置的安全功能。 有很多方法可以“破解”它，但由服务器来响应正确的标头。

因此，鉴于这种回应，那么针对 CORS 问题实施修复的最“成功”方式是什么？

好的，经过两天的研究，我终于明白了。

严格来说，这不是 axios 的问题。 实际上，这甚至不能被视为一个问题。 axios 被设计为遵循所有那些奇怪和烦人的 CORS 标准，所以消息： CORS header ‘Access-Control-Allow-Origin’ missing预计会发生，这是 axios 的正确工作。 在使用 4chan api 的示例中，如前所述，问题不在于 axios，而是 4chan api 本身没有遵循 CORS 标准。

有些人建议使用代理来处理7避免所有标头验证的老技巧。 这是 Negar Jamalifard 的一篇博客，解释了如何做到这一点： https ://medium.com/js-dojo/how-to-deal-with-cors-error-on-vue-cli-3-d78c024ce8d3 顺便说一句，我不确定这是否可以被视为一种不好的做法。

在我的情况下，我花了两天时间尝试连接到我自己的本地主机中的 asp net core api，直到我意识到 axios，在发送我的 get 请求之前，自动发送了一个“预检请求”，它是作为我的服务器的 OPTIONS 方法发送的不准备处理。 如果有人责怪 chrome 和 firefox 显示的消息如此含糊不清。

有些人建议使用代理来处理7避免所有标头验证的老技巧。 这是 Negar Jamalifard 的一篇博客，解释了如何做到这一点： https ://medium.com/js-dojo/how-to-deal-with-cors-error-on-vue-cli-3-d78c024ce8d3 顺便说一句，我不确定这是否可以被视为一种不好的做法。

那么对于这些​​调用来说，代理是最好的情况吗？ 这是一种耻辱。

那么对于这些​​调用来说，代理是最好的情况吗？ 这是一种耻辱。

嗯...您也可以尝试与创建您要使用的 api 的人交谈，并要求他们修复它。

我已经解决了这个问题：
对于 axios： url=" http://localhost :8080" method='post'
对于我的 Django 服务器响应：
uesrItem = {'用户'：'xxx'}
响应 = JsonResponse(userItem)
response["Access-Control-Allow-Origin"] = " http://localhost :8080"
response["Access-Control-Allow-Credentials"] = 'true'
response["Access-Control-Allow-Methods"] = "POST, OPTIONS"

问题不在于 axios，而在于您请求的 API！

例如，我在 Flask 中编写了一个 API，GET 方法是：

@app.route('/api/autores', methods=['GET'])
def get_users():
    drivers_json = []
    for user in user_dao.list_users():
        drivers_json.append(user.to_json())
    return make_response(jsonify(drivers_json), 201)

但是当我在 API 响应中添加标头时问题就解决了：

@app.route('/api/autores', methods=['GET'])
def get_users():
    drivers_json = []
    for user in user_dao.list_users():
        drivers_json.append(user.to_json())
    response = jsonify(drivers_json)
    response.headers.add('Access-Control-Allow-Origin', '*')
    return response

然后我记录我的 axios 响应并得到它：

{data: Array(4), status: 200, statusText: "OK", headers: {…}, config: {…}, …}

我不知道你们都在使用什么 API 但在 Flask 中它解决了！

就我而言，axios 没有任何问题。 我只是问创建 API 的人来启用 CORS 服务器端。

尝试这个

delete axios.defaults.headers.common["X-Requested-With"];

我已经使用了https://github.com/Rob--W/cors-anywhere解决方法并且工作得很好，但在 prod 中，我会问制作 api 的人为我的域启用 cors

我认为您不能直接在 axios 中解析 CORS，因为 CORS 是浏览器限制，位于您的浏览器和目标服务器之间。

您可以：

1. 在来自目标服务器的响应标头中包含Access-Control-Allow-Origin 。
2. 不要在您的 axios 请求中包含主机名，因此它会请求您的原始服务器。 然后从您的原始服务器，您可以对目标服务器执行任何操作。

请提及详细的示例代码片段。
他会有所帮助。

我在本地遇到了同样的问题。
我在后端添加了 cors 并解决了。 :)

这不是axios的问题 这是后端的问题。 我正在使用 Django。 添加这两个将解决问题。

添加 CORS 中间件

MIDDLEWARE = [
...
'corsheaders.middleware.CorsMiddleware',
...
]

并允许 CORS。
（允许所有人使用 CORS）

CORS_ORIGIN_ALLOW_ALL = True

（这有点不安全，因为它允许所有来源。这将使它容易受到 CSRF 攻击）
因此对于生产只允许特定来源

CORS_ORIGIN_ALLOW_ALL = False

CORS_ORIGIN_WHITELIST = (
    '<YOUR_DOMAIN>[:PORT]',
)

示例：+1：

CORS_ORIGIN_ALLOW_ALL = False

CORS_ORIGIN_WHITELIST = (
    '127.0.0.1:8000',
)

大家好，
正如已经提到的，这个问题是针对跨域请求的浏览器保护。 我按照以下说明解决了它： https :

对于还在苦苦挣扎的人：
希望现在您明白这不是 Axios 的问题，并且浏览器由于服务器未设置标头而阻止了 CORS。 如果您确实理解这一点，并且在您自己的服务器未设置标题时仍然遇到问题，请确保在使用反向代理时enable-cors.org对如何设置它在NGINX。

对于还在苦苦挣扎的人：
希望现在您明白这不是 Axios 的问题，并且浏览器由于服务器未设置标头而阻止了 CORS。 如果您确实理解这一点，并且在您自己的服务器未设置标题时仍然遇到问题，请确保在使用反向代理时enable-cors.org对如何设置它在NGINX。

我已经挣扎了 3 个小时，客户端没有任何变化，最后我在服务器上添加了以下内容：

安装 egg-cors（仅适用于 egg 项目）

// ./config/config.default.js

config.cors = {
    origin: ["http://localhost:8080"],
    allowedHeaders: [
      "Content-Type",
      "Authorization",
      "Access-Control-Allow-Methods",
      "Access-Control-Request-Headers"
    ],
    credentials: true,
    enablePreflight: true
  };

就这样

const board = this.props.routeParams.tag;
axios.get('https://cors-anywhere.herokuapp.com/' + 'https://a.4cdn.org/' + board + '/threads.json', config)
.then(function (response) {
console.log(response.data);
});

只需使用fetch来测试服务器的 cors 是否首先工作。

和...

axios可以请求我的koa-server ，但不能直接请求iris ，它们都支持流行的 cors-middleware。

1358

这对我有用，需要了解原因

我正在使用 Tornado 和 Vuejs，axios 不是问题，在我的后端添加：

# Tornado
class ClassName(tornado.web.RequestHandler):
    def set_default_headers(self):
        self.set_header("Content-Type", "application/json")
        self.set_header("Access-Control-Allow-Origin", "*")
        self.set_header("Access-Control-Allow-Headers", "content-type")
        self.set_header(
            'Access-Control-Allow-Methods',
            'POST, GET, OPTIONS, PATCH, PUT'
        )

@robertjchristian
成功了
Verrrrrrrrrrry 谢谢

我有相同的问题
我的代码
轴（{
方法：“获取”，
url: "http://localhost:4000/users",
})
.then（响应 => {
控制台日志（响应）；
})
.catch（错误 => {
控制台日志（错误）
});
}
收到此错误
CORS 策略已阻止从源“ http://localhost :3000”访问“ http://localhost :4000/users”处的 XMLHttpRequest：对预检请求的响应未通过访问控制检查：无“访问控制” -Allow-Origin' 标头存在于请求的资源上。

谁能给我一步一步的解决方案来解决我应该做什么？

@albertpinto首先，您应该明白 axios 不是问题，您使用的“后端”需要能够接收外部数据。 所以在谷歌你可以搜索。 类似于 _enable cors on（输入您使用的语言或框架）_

@albertpinto在这个超级线程中查看所有可能的解决方案。 这不是您端的客户端/前端问题 - 它实际上是服务器（本地主机：4000）。 服务器需要使用 CORS 标头响应以允许来源。

例如，您的服务器应使用以下标头进行回复：

Access-Control-Allow-Origin:  *
Access-Control-Allow-Headers: Content-Type

我通过以下方法解决了这个问题：

1. 安装 cors npm ： npm install cors （在我的情况下，在您的其余节点服务器上 http://localhost:4000）

这也适用于您的终点：
var cors = require('cors')
var express = require('express')
var cors = require('cors')
var app = express()
app.use(cors())

感谢所有的建议！

// 对于 CORS，如果你使用 express js，你可以通过 npm 简单地使用 cors 包。

app.use(
    cors({
        credentials: true,
        origin: [
            'http://localhost:8080',
            'http://your-production-website.com'
        ]
    }),
)

cURL 不强制执行 CORS 规则。 出于安全目的，浏览器会强制执行这些规则。

当您提到您添加了相关标头时，我假设您的意思是您将这些标头添加到请求中。 其实服务端的响应头中应该有header，表示允许其他网站直接访问该资源。

仅供参考，CORS - 跨源资源共享。 由于您的 API 不支持它，您有两个选择 -

1. 使用与您的网页位于同一域的代理服务器来访问 4chan 的 API，或者，
2. 在任何其他域上使用代理服务器，但修改响应以包含必要的标头。

我想投票以“不是问题”来结束这个问题。

@sunnykgupta
相同的逻辑，相同的正文，但对远程后端端点的 Angular http post 请求未收到 CORS 块错误

如果您正在运行 Go 服务器，建议您使用Gorilla

headersOk := handlers.AllowedHeaders([]string{"X-Requested-With", "Content-Type"})
originsOk := handlers.AllowedOrigins([]string{"*"})
methodsOk := handlers.AllowedMethods([]string{"GET", "HEAD", "POST", "PUT", "OPTIONS"})

err := http.ListenAndServe("localhost:8081", handlers.CORS(originsOk, headersOk, methodsOk)(r))

我通过以下方法解决了这个问题：

1.在项目根目录下 package.json 旁边创建一个vue.config.js文件，包含：

module.exports = {
    devServer:{
        proxy: {
            '/apiv1': {
                target: 'https://fuping.site/',
                changeOrigin: true,
                pathRewrite: {
                    '^/apiv1': ''
                }
            },
        },
    }
}

2.发出这样的http请求：

this.$axios({
          method:'get',
          url:'apiv1/about/',

        }).then(function(response){
          console.log(response.data)
        }).catch(error=>{
          console.log(error)
        })

axios.get('https://a.4cdn.org/a/threads.json', {
标题：{
'Access-Control-Allow-Origin': '*',
'Access-Control-Allow-Headers': 'Content-Type, Authorization',
},
代理： {
主机：'104.236.174.88'，
端口：3128
}
}).then(函数（响应）{
console.log('响应是：' + response.data);
}).catch(函数(错误){
如果（错误。响应）{
console.log(error.response.headers);
}
否则如果（错误。请求）{
控制台日志（错误。请求）；
}
别的 {
控制台日志（错误消息）；
}
控制台日志（错误配置）；
});

大家好，
我只是发布这个，因为我花了几个小时来解决这个问题。

首先，CORS 绝对是服务器端问题，而不是客户端问题，但我非常确定服务器代码在我的情况下是正确的，因为其他应用程序在不同域上使用相同的服务器工作。 当我开始在自定义实例中使用axios时，问题就开始了。

就我而言，当我们在axios实例中使用baseURL然后尝试从任何地方进行GET或POST调用时，这是一个非常具体的问题， axios在baseURL和请求 URL 之间添加一个斜杠/ 。 这也有道理，但这是隐藏的问题。 我的 Laravel 服务器正在重定向以删除导致此问题的尾部斜杠。

通常，飞行前OPTIONS请求不喜欢重定向。 所以，一定要检查并避免它。

我希望这可能对某人有所帮助，尽管这都不是错误。