vueaxios跨域（vue跨域解决方案 简书）

简介：

Vue.js 是一款流行的前端框架，与常见的前端框架一样，Vue.js 支持通过 AJAX 调取服务端 API 接口获取数据。而 Axios 是一款基于 Promise 的 HTTP 库，可以在不同的浏览器和 Node.js 中使用。本文将介绍如何在 Vue.js 中使用 Axios 进行跨域请求。

一、Axios 的使用

Axios 的使用非常简单，先使用 npm 安装 Axel：

```

npm install axios --save

```

接着在 Vue.js 中使用 Axios：

```

import axios from 'axios';

axios.get('http://api.example.com/get-some-data')

.then(function (response) {

console.log(response.data);

})

.catch(function (error) {

console.log(error);

});

```

二、跨域问题的产生

浏览器中的 JavaScript 基于同源策略，限制了来自不同源的 HTTP 请求之间的交互。如果从不同的域名或端口请求数据，浏览器将无法防止此类请求，因为 JavaScript 将无法读取从另一个域发送的响应。

三、跨域请求

1、JSONP

JSONP 是一种在非同源请求时解决跨域问题的技术。JSONP 是通过在服务端返回一个预定义的 JavaScript 函数调用来实现的，因此它利用了 script 标签不受同源策略限制的特性。

示例：

```

```

2、CORS

CORS 全称是 Cross-Origin Resource Sharing，是一种跨域请求的规范。通过 CORS，服务端可以支持 AJAX 调用来跨域请求资源。

服务端可以在响应中添加 Access-Control-Allow-Origin 头部，指定可以访问资源的域名或源，例如：

```

Access-Control-Allow-Origin: http://example.com

```

Vue.js 使用 Axios 调用 CORS API 的示例代码如下：

```

axios.get('http://api.example.com/user', {

headers: {'Access-Control-Allow-Origin': 'http://example.com'}

})

.then(function (response) {

console.log(response);

})

.catch(function (error) {

console.log(error);

});

```

四、总结

Axios 是一款非常实用的 HTTP 库，可以轻松地处理 AJAX 调用。在使用 Vue.js 项目时，跨域请求问题是常见的问题之一，可以通过 JSONP 或 CORS 来解决跨域请求的问题。在跨域请求时，需要仔细检查服务端响应的 Access-Control-Allow-Origin 头部，以确保 AJAX 调用被正确地允许访问。