在进行axios.get调用时出现CORS错误

Question

我正在使用axios在我的redux action.js文件中进行axios.get调用.在我的组件中,此操作在表单提交时执行.

我200在我的控制台中获得状态但没有收到任何回复.我收到以下错误:

No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http:\\\\localhost:3000' is therefore not allowed access.

有没有人遇到过这样的错误？请你分享一下如何解决这个问题.

Answer 1

问题不在于axios.问题出在服务器上.提供数据时,必须先添加以下标题,然后再发送.

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

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

Answer 2

我解决这个问题的第一个困惑是了解预检请求的含义.所以我将从那里开始.

只要请求不符合以下条件,浏览器就会发送预检请求:

1. HTTP方法匹配(区分大小写)之一:
   • 得到
   • POST
   • 头
2. HTTP标头匹配(不区分大小写):
   • 接受
   • 接受语言
   • 内容语言
   • 最后,事件ID
   • Content-Type,但仅当值为以下值之一时:
     • 应用程序/ x-WWW窗体-urlencoded
     • 多部分/格式数据
     • 纯文本/

预检请求是使用OPTIONS方法进行的,该方法包括三个额外的标头,如果没有为CORS配置,服务器可能不会期望这些标头.他们是:

• 访问控制允许报头
• 访问控制允许来源
• 访问控制允许的方法

如果没有为CORS配置服务器,它只会响应具有HTTP状态代码200的空标头.一旦为CORS配置了服务器,就应该将上面列出的标头包含在CORS支持的标头中.

这应该清除错误并允许您与服务器通信.

注意:虽然您的服务器可以处理您创建的自定义标头(在我的情况下,Authorization对于JWT身份验证),但很可能不会为CORS请求配置它.如果您可以访问服务器,只需了解如何为该服务器配置CORS.

有关CORS的更多信息.请参阅https://www.html5rocks.com/en/tutorials/cors/