前端跨域解决方案之proxy跨域代理发送请求

一、在vue.config.js中配置

module.exports = {
    publicPath: process.env.NODE_ENV === 'production' ? './' : './',
    outputDir: 'dist',
    devServer: {
        disableHostCheck: true,
        proxy: {
            '/bigScreen' : { //接口开头通用路径
                target: "http://192.168.10.101:8090",//服务端地址
                changeOrigin: true,//开启代理
                secure: false,
                pathRewrite: {
                    '^/bigScreen' : '/' //接口开头通用路径
                },
              }
          },
      },
     ...
}

1.2配置中主要的参数说明
1.2.1 ‘/api’
捕获API的标志，如果API中有这个祖父出窜，那么就开始匹配代理，比如API请求/api/users，会被代理到http://www.baidu.com/api/users。

1.2.2 target
代理API地址，就是需要跨域的API地址。地址可以是域名，也可以是IP地址。如果是域名需要额外添加一个参数changeOrigin: true，否则会代理失败

1.2.3 pathRewrite
路径重写，也就是说会修改最终请求的API路径。比如访问的API路径/api/users，设置pathRewrite: {'^/api' : ''},后，最终代理访问的路径为：http://www.baidu.com/users，这个参数的目的是给大力命名后，在访问时把命名删除掉。

1.2.4 changeOrigin
这个参数可以让target参数是域名

1.2.5 secure
secure: false，不检查安全问题。设置后，可以接受运行在HTTPS上，可以使用无效证书的后端服务器。

1.2.6 其他参数配置查看http-proxy-middleware文档
其他的配置参数等信息，可以查看这里：https://github.com/chimurai/http-proxy-middleware

原文链接：https://blog.csdn.net/xuanhaiyang2008/article/details/101541830

二、请求配置，通过axios请求

1.如查请求头中“Content-Type:application/json;charset=UTF-8” json格式，则请发的数据为JSON数据，

axios({
	headers: {
		'deviceCode': 'A95ZEF1-47B5-AC90BF3'
	},
	method: 'post',
	url: '/api/lockServer/search',
	data: {
		username:username,
		pwd:pwd
	}
})

如查请求头中“Content-Type:application/x-www-form-urlencoded”格式，则请发的数据为字符串数据，(一般服务器默认）

import Qs from 'qs'
let data = {
	"username": "admin",
	"pwd": "admin"
}

axios({
	headers: {
		'deviceCode': 'A95ZEF1-47B5-AC90BF3'
	},
	method: 'post',
	url: '/api/lockServer/search',
	data: Qs.stringify(data)
})

2.axios请求封装

// request interceptor请求栏截器
service.interceptors.request.use(
    config => {
        let url = config.url
        // get参数编码
        if (config.method === 'get' && config.params) {
            url += '?'
            let keys = Object.keys(config.params)
            for (let key of keys) {
                url += `${key}=${encodeURIComponent(config.params[key])}&`
            }
            url = url.substring(0, url.length - 1)
            config.params = {}
        }
        config.url = url
         config.headers['Content-Type'] = 'application/json;charset=UTF-8'; //设置请求头
         config.headers['token'] = "adsfsdsf33qrwe"; //设置token
        return config
    },
    error => {
        console.log(error) // for debug
        return Promise.reject(error)
    }
)