Laravel - Vue Axios CORS 策略

Posted 2023-03-04

【中文标题】Laravel - Vue Axios CORS 策略

【英文标题】：Laravel - Vue Axios CORS policy

【发布时间】：2021-02-22 17:23:28

【问题描述】：

请求

axios.get("https://maps.googleapis.com/maps/api/geocode/json?latlng="+this.currentLocation.lat+","+this.currentLocation.lng+"&key="+this.apiKey).then((response) => 
                        if (this.town === response.data.results[0].address_components[2].long_name)
                            return
                        
                        else
                            this.town = response.data.results[0].address_components[2].long_name
                            this.getSuggested();
                            this.getAllEvents();
                        
                        
                ).catch(er => 
                    console.log(er)
                )

当我尝试获取某个位置的城镇时，我收到此错误

CORS 策略已阻止从源“http://localhost:8000”访问“API Route”处的 XMLHttpRequest：预检中 Access-Control-Allow-Headers 不允许请求标头字段 x-requested-with回应。

当我删除时

window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';

来自 bootstrap.js，请求工作正常。

这到底是什么问题？

【参考方案1】：

如果您发送请求的任何服务器包含不是CORS-safelisted 的标头，通常默认情况下都会拒绝它。

window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';

此代码告诉 axios 为每个请求附加一个自定义标头。因此，您的请求正在发送带有非安全列表的标头，服务器不允许，因此您收到错误。

要允许请求，必须将服务器配置为允许自定义标头。