在这种情况下出现问题 CORS 策略，而它适用于其他资源

Posted 2023-02-22

【中文标题】在这种情况下出现问题 CORS 策略，而它适用于其他资源

【英文标题】：Problem CORS Policy in this case while it works for other resources

【发布时间】：2019-12-24 12:14:25

【问题描述】：

我使用 Laravel 构建我的 API。在前端，我使用 Vuejs 和 Nuxtjs。

CORS 政策政策包已安装并与我的所有其他资源一起使用。

对于我的一项功能，它不起作用。出现以下错误，我不明白为什么：

Access to XMLHttpRequest at 'http://myapp.test/api/bilan/storestatus' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
11:22:48.855 

POST http://myapp.test/api/bilan/storestatus net::ERR_FAILED

我这样做了：

<el-switch v-model="status.status" @change="storeStatus">
</el-switch>

data() 
  status:  status: 0 

async storeStatus() 
        try 
            await axios.post('bilan/storestatus', this.status)
                .then( () => 
                    this.$message(
                        message: this.$t('status.updated'),
                        type: 'success'
                    )
        )
        .catch(error => 
            console.log(error);
        )
     catch (e) 
        console.log(e)
    
,

你能解释一下为什么我会收到这个错误吗？

尤其是我的应用程序的其余部分一切正常。

【问题讨论】：

如果您绝对确定 CORS 策略是正确的并且应该允许 localhost 源访问 myapp.test/api/bilan/storestatus 然后检查实际响应。有时成功的响应确实提供了正确的 CORS 标头，但如果出现错误，则错误标头不提供任何 CORS 标头，因此浏览器由于 CORS 原因导致请求失败，而实际上请求由于其他原因而失败（除了 CORS )

@apokryfos 感谢您的回复。对于此查询，我在标题中看不到任何 CORS。怎么看问题出在哪里？我向盲人前进

php artisan cache:clearphp artisan config:clearphp artisan route:clearphp artisan config:cachephp artisan route:cache这些代码，如果你开发的时候出现问题可以试试

您应该收到 2 个请求，一个是 OPTIONS，另一个是 POST。如果第一个请求成功，那么检查第二个请求的状态码和内容，如果它是错误的，那么问题可能不是 CORS，而是一个实际的代码错误。

【参考方案1】：

您的请求是否存在内部错误？ CORS 策略包的一个问题是 Laravel 默认错误处理程序将创建新的响应头。如果请求通过错误处理程序运行，它将删除 CORS 标头。因此，如果您的请求出现内部错误，您不会收到 500 错误，而是会因为响应标头被覆盖而收到 CORS 错误。

【参考方案2】：

您还应该在服务器中启用 CORS。然后加 axios.defaults.headers.post['Access-Control-Allow-Origin'] = '*';

或者这是服务器不接受选项请求的问题。您将在https://www.html5rocks.com/en/tutorials/cors/ 中了解有关 CORS 的更多详细信息