【vue前端】axios跨域代理

【vue前端】axios跨域代理

安装axios

$ npm install axios -D

导入axios

在src文件夹下的main.js中添加

import axios from 'axios'

// 将axios挂载在Vue实例原型上
Vue.prototype.$axios = axios
// 基础路径，每次发送的请求都会携带一个/api的前缀
axios.defaults.baseURL = '/api'

使用proxyTable配置代理服务器

若项目中存在config文件夹

在config文件夹下的index.js中修改proxyTable
（target里面的接口替换成自己的）

proxyTable: {
	'/api': {
		 target: 'http://ip:port', // 请求的第三方接口
		 secure: false,  // 如果是https接口，需要配置这个参数为true
		 changeOrigin: true, // 在本地会创建一个虚拟服务端，然后发送请求的数据，并同时接收请求的数据，这样服务端和服务端进行数据的交互就不会有跨域问题
		 pathRewrite: {  // 路径重写，
		   '^/api': ''  // 替换target中的请求地址，也就是说以后你在请求http://IP:PORT这个地址的时候直接写成/api即可。
		 }
	}
},

若项目中不存在config文件夹

在项目的根目录下新建文件 vue.config.js，内容为

module.exports = {
    filenameHashing: false,  // 关闭文件名哈希
    lintOnSave: false,  // 在保存的时候不使用 `eslint-loader` 进行检查
    runtimeCompiler: true,  // 使用包含运行时编译器的 Vue 构建版本
    devServer: {
        open: true,
        host: 'localhost',
        port: 8080,
        https: false,
        proxy: {
            '/api': {
                target: 'http://ip:port',  // 请求的第三方接口
                secure: false,   //如果是http接口，需要配置该参数
                ws: true,  // proxy websockets，访问网关，使用http的连接方式进行socket信息推送
                changeOrigin: true,  // 在本地会创建一个虚拟服务端，然后发送请求的数据，并同时接收请求的数据，这样服务端和服务端进行数据的交互就不会有跨域问题
                pathRewrite: {  // 路径重写，
                    '^/api': ''  // 替换target中的请求地址，也就是说以后你在请求http://ip:port这个地址的时候直接写成/api即可。
                }
            }
        }
    }
}

重启项目

修改配置代码需要重启服务。例如：

# 以下三行代码中选择自己项目启动的命令
$ npm start
$ npm run dev
$ npm run serve

请求示例

若需要访问的接口为 http://ip:port/xxx, 则只需在url中写 /xxx 即可

GET

this.$axios({
	method: 'get',
	url:'/xxx'  // 需要请求的接口名称
}).then(function(response){
 	console.log(response);
}).catch(function(error){
  	console.log(error);
})

POST

示例

post请求常见的数据类型：

1. Content-Type: application/json： 请求体中的数据会以json字符串的形式发送到后端（默认为这种）。
2. Content-Type:
   application/x-www-form-urlencoded：请求体中的数据会以普通表单形式（键值对）发送到后端。
3. Content-Type: multipart/form-data：
   它会将请求体的数据处理为一条消息，以标签为单元，用分隔符分开。既可以上传键值对，也可以上传文件。

const myHeaders = {
	"content-type": "application/json",
};
this.$axios({
	method: 'post',
	url:'/xxx'  // 需要请求的接口名称
	headers: myHeaders,
	data: JSON.stringify(myData),  // myData是请求时发送的数据，例如{account: "admin",password: "123456",}
}).then(function(response){
 	console.log(response);
}).catch(function(error){
  	console.log(error);
})

数据类型转换

• application/json类型转换

JSON.stringify(myData)

• application/x-www-form-urlencoded类型转换

import qs from 'qs'

qs.stringify(myData)

• 如果post调试发现传的数据类型正确，但还是报错，即使是代表前端发送数据类型错误的400，也找后端询问一下。
  我最初get请求成功，post报错400，自己调试了几个小时，但是最后发现是后端的问题。