Vue + axios：已被 CORS 策略阻止

Question

我有使用 axios 的 vue 应用，首先将 axios 设为默认值： 从'axios'导入axios

const token ='xxxxxxxxx'
axios.defaults.headers.common['Access-Control-Allow-Origin'] = '*';
axios.defaults.headers.common['Authorization'] = `Bearer ${token}`;
axios.defaults.baseURL = 'http://xxxxxxxxx/api/v1/'

然后在我调用 axios 的页面中：

<script>
export default {
    data : function () {
        return {
            games : []
        }
    },
    created: async function(){
       await this.axios('games/this',{withCredentials: true,}).then((res)=>  this.games=res.json)  
    }
}
</script>

我收到此错误from origin 'http://localhost:3001' 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

我从这个网站的帖子中尝试了很多解决方案，但都不起作用

Answer 1

CORS 问题应在后端解决。 如果你使用 Lumen 作为后端，请确保你安装了 Laravel-Cors https://github.com/spatie/laravel-cors 然后在 config/cors.php 文件中设置 allowed_origins 为 *。

...

'allowed_origins' => ['*'],

...