Question

请求

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路由”处的XMLHttpRequest：预检中Access-Control-Allow-Headers不允许请求标头字段x-requested-with响应。

当我移除

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

bootstrap.js中的请求正常工作。

这里到底是什么问题？

Answer 1

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

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

此代码告诉axios将自定义标头附加到每个请求。太好了，您的请求发送时带有非安全列出的标头，服务器不允许该标头，因此您会收到错误消息。

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

Laravel-Vue Axios CORS政策

1 个答案: