Vue axios发布请求被CORS策略阻止[重复]

Posted 2023-02-22

【中文标题】Vue axios发布请求被CORS策略阻止[重复]

【英文标题】：Vue axios post request blocked by CORS policy [duplicate]

【发布时间】：2020-06-02 22:02:55

【问题描述】：

Vue axios 发布请求

axios.post(`$this.host:$this.port/apiv2/login`, 
        body: 
          userName: this.user,
          password: this.pwd
        
      );

导致错误：

Access to XMLHttpRequest at 'http://localhost:9047/apiv2/login' from origin 'http://localhost:8080' 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.

python 请求、邮递员或简单的 curl 可以毫无错误地完成这项工作

curl 'http://localhost:9047/apiv2/login' -H 'Content-Type: application/json' --data-binary '"userName":"user","password":"pass"'

更新： 这是我的解决方案：

我添加了 NodeJS 服务器 (localhost:8081)。现在 Vue (localhost:8080) 正在访问 NodeJS，而 NodeJS 正在查询 Dremio API (localhost:9047)。

只有静态 Vue 应用的想法行不通。

【问题讨论】：

您的后端使用哪种技术？

这能回答你的问题吗？ Why doesn’t Postman get a "No 'Access-Control-Allow-Origin' header is present on the requested resource" error when my javascript code does?

我从 vue (localhost:8080) 查询一个 Dremio 服务器 api (localhost:9047)

【参考方案1】：

第一个：尝试在里面添加'Access-Control-Allow-Origin': '*'，然后再试一次。 如果不起作用，请转到您的“Localhost:8080”并将访问控制来源设置为 *，然后再试第一步

【讨论】：

在生产环境中，这会使服务器容易受到 XSS 攻击。不推荐。

是的，我的意思是如果这一步有效，那么继续设置cors。