TL;博士
我的Axios调用的格式有一些问题,并发现在调用中使用头作为常量或变量不起作用,而将头直接转储到调用中起作用。
在PHP方面,有一些额外的大括号的访问控制允许头指令,导致头响应被括号。
总而言之,它通过浏览器开发工具中的网络选项卡进行故障排除,帮助我们找到了修复方法。
我对编程非常陌生,对Vue.js和Axios也很陌生。所以我可能在概念和句法上遗漏了一些部分。我正在开发一个运行自定义管理工具的基于PHP的应用程序的前端。我的目标是使用Vue.js构建前端,并特别使用Axios进行API调用。
我们的PHP环境最初允许我传递参数,如用户ID、API键和查询(而user=x method=get,apikey=x,),我可以轻松地使用数据并以v-for格式输出,一切都很好。但是,它不是一个设计良好的API结构,因此我们改变了传递参数的想法,因为我不喜欢在URL中传递API键,也不喜欢必须传递SQL查询才能获取数据的想法。我的同事调整了API,现在我们有了一个URLhttps://tunnel.host.com/api/sites/read.php. 稍后,我们还将为其余的CRUD操作提供PHP文件。但我需要克服目前的问题。
我的研究立刻让我想到了CORS的问题,我花了很多时间阅读这个主题,最终觉得这个问题阻碍了我向服务器传递必要的头并获得访问权。
我曾一度认为安装CORS npm包会有所帮助,但这似乎只是为了解决本地托管服务器环境的问题。(如在开发环境中使用ExpressJS作为服务器)
在阅读了有关CORS的Mozilla文档之后,我想知道是否需要在OPTION HTTP请求中发送飞行前头。
到目前为止,我已经尝试过了:-添加一个带有开发服务器选项的vue.config.js文件(我将包括下面的代码)-使用POSTMAN来构造标头并传递GET请求-这很好-尝试使用标头键Axios对象(代码如下)
我的同事谁运行PHP方面的东西向我保证,所有的CORS头文件是正确的。
我只有一个组件被加载到pp.vueAxiosTest。
我编辑了这篇文章来更新我的发现。
通过将标头作为const发送,请求作为GET发出
const config = {
headers: {
"content-type": "application/vnd.api+json",
"Cache-Control": "no-cache",
"x-api-key": "9xxxxxxxxxxxxxxxxxxxxxx9"
}
}
axios.get(
`https://tunnel.xxxxx.com/api/headers.php?`,{ config
})
.then(response => {
this.results = response;
})
.catch(error => {
// eslint-disable-next-line
console.log(error)
})
和标题响应
HTTP/1.1 200 OK
Server: nginx/1.10.3 (Ubuntu)
Date: Mon, 08 Jul 2019 19:22:55 GMT
Content-Type: application/json; charset=UTF-8
Transfer-Encoding: chunked
Connection: keep-alive
Access-Control-Allow-Origin: http://54.x.x.155:8080
Access-Control-Allow-Credentials: true
Access-Control-Max-Age: 0
和请求
Host: tunnel.xxxxxx.com
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.12; rv:67.0) Gecko/20100101 Firefox/67.0
Accept: application/json, text/plain, */*
Accept-Language: en-US,en;q=0.5
Accept-Encoding: gzip, deflate, br
Referer: http://54.x.x.155:8080/
Origin: http://54.x.x.155:8080
DNT: 1
Connection: keep-alive
Cache-Control: max-age=0
但是,如果我把Headers对象放在axios.get函数中,我就会把它作为OPTIONS发送出去
axios.get(
`https://tunnel.xxxx.com/api/headers.php?`,{
headers: {
"content-type": "application/vnd.api+json",
"Cache-Control": "no-cache",
"x-api-key": "9xxxxxxxxxxxxxxxxxxxxxx9"
}
})
.then(response => {
this.results = response;
})
.catch(error => {
// eslint-disable-next-line
console.log(error)
})
回答
HTTP/1.1 200 OK
Server: nginx/1.10.3 (Ubuntu)
Date: Mon, 08 Jul 2019 19:22:55 GMT
Content-Type: application/json; charset=UTF-8
Transfer-Encoding: chunked
Connection: keep-alive
Access-Control-Allow-Origin: http://54.x.x.155:8080
Access-Control-Allow-Credentials: true
Access-Control-Max-Age: 0
Access-Control-Allow-Methods: GET, POST, OPTIONS
Access-Control-Allow-Headers: {cache-control,x-api-key}
要求
Host: tunnel.xxxxx.com
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.12; rv:67.0) Gecko/20100101 Firefox/67.0
Accept: */*
Accept-Language: en-US,en;q=0.5
Accept-Encoding: gzip, deflate, br
Access-Control-Request-Method: GET
Access-Control-Request-Headers: cache-control,x-api-key
Referer: http://54.x.x.155:8080/
Origin: http://54.x.x.155:8080
DNT: 1
Connection: keep-alive
Cache-Control: max-age=0
vue.config.js
module.exports = {
devServer: {
public: '54.x.x.x:8080',
proxy: 'https://tunnel.xxxxxxx.com/'
}
}
在最成功的测试中,我仍然收到无效的CORS源代码或无效的API密钥。
任何提示,代码片段,链接或任何人可以分享的经验将不胜感激。
下面是我在PHP脚本顶部调用的函数,它允许请求者100%完全访问CORS。
function InitCors() {
if (isset($_SERVER["HTTP_ORIGIN"])) {
header("Access-Control-Allow-Origin: {$_SERVER["HTTP_ORIGIN"]}");
header("Access-Control-Allow-Credentials: true");
header("Access-Control-Max-Age: 0");
}
if ($_SERVER["REQUEST_METHOD"] == "OPTIONS") {
if (isset($_SERVER["HTTP_ACCESS_CONTROL_REQUEST_METHOD"])) header("Access-Control-Allow-Methods: GET, POST, OPTIONS");
if (isset($_SERVER["HTTP_ACCESS_CONTROL_REQUEST_HEADERS"])) header("Access-Control-Allow-Headers: {" . $_SERVER["HTTP_ACCESS_CONTROL_REQUEST_HEADERS"] ."}");
}
header("Content-Type: application/json; charset=UTF-8");
}
对我的Axios调用的格式有一些问题,发现在我的调用中使用标头作为常量或变量不起作用,而直接将标头倾倒到调用中确实起作用。
在PHP方面,有一些额外的大括号的访问控制允许头指令,导致头响应被括号。
总而言之,是通过浏览器开发工具中的“网络”选项卡进行故障排除,帮助我们找到了修复方案。
请参阅axios的文档:
axios.get(url[, config])
get
方法接受两个参数,但要传递三个参数。
因此,您试图传递的数据被视为配置(并被忽略,因为没有任何值是有效的配置选项),配置数据(包括请求头对象)被忽略。
查询字符串必须是URL的一部分。Axios不会使用第二个参数为您生成它。
const data = {
foo: "bar"
};
axios.get(
`https://example.com/api/headers.php?${new URLSearchParams(data)}`, {
headers: {
"Cache-Control": "no-cache",
"content-type": "application/vnd.api+json",
"x-api-key": "9xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx9"
}
}).then(response => {
console.log(response);
}).catch(error => {
console.log(error)
})
如果我取出授权头选项,请求就会工作。 我也试过https://github.com/barryvdh/laravel-cors,但仍然没有乐趣。任何帮助都很感激!
我想在我的页面中获取数据,如果我运行: 获取http://localhost:8000/api/posts net::err_aborted401(未经授权) CORS策略阻止从来源“http://localhost:3000”访问位于“http://localhost:8000/api/posts”的XMLHttpRequest:请求的资源上没有“access-control-allog-ori
我能做什么?
这是怎末回事,这是vue和springboot项目,前端我一直运行不出来 不知道怎末运行起来,求帮助
本文向大家介绍vue项目中使用lib-flexible解决移动端适配的问题解决,包括了vue项目中使用lib-flexible解决移动端适配的问题解决的使用技巧和注意事项,需要的朋友参考一下 第一部分:项目中引入lib-flexible 一、项目中安装lib-flexible 二、在项目的入口js文件中引入lib-flexible 通过要以上两步,就完成了在vue项目使用lib-flexible来
本文向大家介绍解决vue中使用swiper插件问题及swiper在vue中的用法,包括了解决vue中使用swiper插件问题及swiper在vue中的用法的使用技巧和注意事项,需要的朋友参考一下 Swiper简介 Swiper常用于移动端网站的内容触摸滑动。 Swiper是纯javascript打造的滑动特效插件,面向手机、平板电脑等移动终端。 Swiper能实现触屏焦点图、触屏Tab切换、触屏多