已解决-在Vue中使用Axios的REST API的CORS、选项和飞行前问题。js

Question

TL；博士

我的Axios调用的格式有一些问题，并发现在调用中使用头作为常量或变量不起作用，而将头直接转储到调用中起作用。

在PHP方面，有一些额外的大括号的访问控制允许头指令，导致头响应被括号。

总而言之，它通过浏览器开发工具中的网络选项卡进行故障排除，帮助我们找到了修复方法。

我对编程非常陌生，对Vue.js和Axios也很陌生。所以我可能在概念和句法上遗漏了一些部分。我正在开发一个运行自定义管理工具的基于PHP的应用程序的前端。我的目标是使用Vue.js构建前端，并特别使用Axios进行API调用。

• 我使用的是一个带有公共端口的Lightsail服务器
• VisualStudio代码，其中安装了远程开发工具，并通过SSH连接，以便在该服务器而不是我的计算机上进行开发
• Vue CLI 3设置我的项目并选择Babel和Linting的默认软件包
• Axios是通过npm安装的

我们的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密钥。

任何提示，代码片段，链接或任何人可以分享的经验将不胜感激。

Answer 1

下面是我在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");
}

Answer 2

对我的Axios调用的格式有一些问题，发现在我的调用中使用标头作为常量或变量不起作用，而直接将标头倾倒到调用中确实起作用。

在PHP方面，有一些额外的大括号的访问控制允许头指令，导致头响应被括号。

总而言之，是通过浏览器开发工具中的“网络”选项卡进行故障排除，帮助我们找到了修复方案。

Answer 3

请参阅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)
    })