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

Question

我用 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)
    }
},

你能解释一下为什么会出现这个错误吗？

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

Answer 1

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

或者是服务器不接受选项请求的问题。您将在 https://www.html5rocks.com/en/tutorials/cors/

中了解有关 CORS 的更多详细信息

Answer 2

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

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

Problem CORS Policy in this case while it works for other resources

javascript

laravel

vue.js

nuxt.js

element-ui