vue跨域配置

 

跨域是指在客户端发起网络请求时，请求的资源与当前网页的源不同，浏览器出于安全机制的考虑会阻止这些跨域请求。Vue框架是一个用于构建用户界面的渐进式JavaScript框架，常常会用于开发单页应用和前后端分离的项目。由于前后端分离的项目常常涉及到跨域请求，因此在开发Vue项目时需要配置跨域。

 

在Vue项目中配置跨域请求，有以下几种常用的方法。

 

1. 通过proxyTable代理：

Vue-cli提供了一个配置文件`config/index.js`，其中可以通过`proxyTable`属性配置代理，将符合设定规则的请求转发到指定的地址。修改`config/index.js`文件，添加如下代码：

 

```javascript

module.exports = {

// ...

dev: {

proxyTable: {

'/api': {

target: 'http://localhost:3000'

// 设置你的请求域名和端口号

changeOrigin: true

 

pathRewrite: {

'^/api': '' // 将/api开头的请求去掉/api

}

}

}

}

 

// ...

}

```

 

在上面的例子中，将以`/api`开头的请求转发到`http://localhost:3000`，并将`/api`去掉，例如`/api/user`会被转发到`http://localhost:3000/user`。

 

然后，在Vue组件中，可以直接发起以`/api`开头的请求，如下所示：

 

```javascript

methods: {

fetchData() {

this.$http.get('/api/user').then(response => {

// 处理返回数据

}).catch(error => {

// 处理错误

})

}

}

```

 

注意，上述代码中的`$http`是Vue框架中的一个内置的HTTP客户端，可以直接发起异步请求。

 

2. 使用axios库：

axios是一个基于Promise的HTTP客户端，可以在浏览器和Node.js中使用。它提供了更高级的功能，如拦截请求和响应、请求和响应的转换和取消请求等。在Vue项目中使用axios库需要先通过npm安装：

 

```bash

npm install axios --save

```

 

在Vue组件中引入axios，并发起跨域请求，如下所示：

 

```javascript

import axios from 'axios'

 

methods: {

fetchData() {

axios.get('http://localhost:3000/api/user').then(response => {

// 处理返回数据

}).catch(error => {

// 处理错误

})

}

}

```

 

上述代码中，直接通过axios库发起了一个GET请求。

 

无论是通过proxyTable代理，还是使用axios库，都可以实现在Vue项目中配置跨域请求。根据你的具体项目需求和环境，选择适合的方法进行跨域配置。