如何解决这个“http://localhost:8080”已被 CORS 策略阻止：对预检请求的响应未通过 vueJS 中的访问控制？

Posted 2023-02-16

【中文标题】如何解决这个“http://localhost:8080”已被 CORS 策略阻止：对预检请求的响应未通过 vueJS 中的访问控制？

【英文标题】：How to solve this 'http://localhost:8080' has been blocked by CORS policy: Response to preflight request doesn't pass access control in vueJS?

【发布时间】：2020-04-04 08:16:35

【问题描述】：

从源“http://localhost:8080”访问“http://localhost/webserivcedemo/state.php”处的 XMLHttpRequest 已被 CORS 策略阻止：对预检请求的响应未通过访问控制检查：Access-Control-Allow-Origin 标头包含多个值 *, *，但只允许一个。

我使用 $http 来调用网络服务。 这是我的请求代码。

export default 
  data() 
    return 
      name: "",
      number: "",
      email: "",
      submitdata: false
    ;
  ,
  methods: 
    handleSubmit: function() 
      var data1 = 
        title: this.name,
        body: this.number + this.email
      ;
      this.$http
        .post("http://localhost/webserivcedemo/state.php", 
          data: data1
        )
        .then(function(data) 
          console.log(data);
          this.submitdata = true;
        );
    
  
;

【问题讨论】：

这不是$http 调用的问题，而是您的服务器返回错误标头的问题。它必须是*，而不是*, *。

我尝试使用 axios 但无法正常工作。我的网络服务和我的 vue 项目都在我的本地服务器中。我使用 nginx。

它们都在您的本地服务器上并不重要，如果它们使用不同的端口号，则适用 CORS。为了使 CORS 工作，您必须从服务器返回一个合适的 Access-Control-Allow-Origin 标头。如错误消息所述，您当前返回的值 *, * 无效。这可能是因为标头* 被添加到两个不同的位置，并且某些东西将它们组合成*, *。避免 CORS 的一种解决方法是通过单个服务器代理所有内容。

在您的问题中添加一个 php 代码的 sn-p 代码，负责发送答案。特别是，我们对片段设置标头感兴趣。

@Ashruti 返回Access-Control-Allow-Origin 标头的片段。

【参考方案1】：

您需要创建新文件vue.config.js，并需要添加如下需要访问的url。

module.exports = 
  devServer: 
        proxy: 'endpoint',
    

【参考方案2】：

解决方案 1：请检查第一个与 http://127.0.0.1:8080 相同的端口/服务器是否运行扭曲？ 如果扭转然后关闭一个。然后检查。

解决方案 2：有时会出现额外的 / API 端点问题。删除多余的/ 然后检查。

谢谢