vue跨域配置proxy 、axios将token配置到请求头部的方法

跨域可以配置proxy
因为在 自动生成的webpack.dev.conf.js 中 包含了

    proxy: config.dev.proxyTable

所以在vue脚手架生成的2.0 中可以通过修改

config>index.js>proxyTable

来实现跨域。
更改proxyTable为

 proxyTable: {
      '/api': { //api是你自己定义的名字
        target: 'http://xxxxxx.com', // 接口的域名
        // secure: false,  // 如果是https接口,需要配置这个参数
        changeOrigin: true, // 如果接口跨域,需要进行这个参数配置
        pathRewrite: {
          '^/api': '' //将api 重写为空
        }
      }
    },

当我配置跨域后 发送请求 如 登陆请求 注册请求 。这样我们就可以请求到token,
token 使我们需要携带在请求头中返回给后端。
以vue项目 axios 为例、
我们需呀在拦截器中配置请求头部

$http.interceptors.request.use(config => {
  var xtoken = JSON.parse(window.localStorage.getItem('token'))//我的token 存储在 localStorage中
  // console.log(xtoken) 如果 xtoken 存在 就设置请求头
  if (xtoken) {
    xtoken = 'Bearer' + xtoken
    // console.log(xtoken)
    config.headers['Authorization'] = xtoken//配置请求头中  Authorization 字段的值为拿到的token
  }
  return config
})

你可能感兴趣的:(vue跨域配置proxy 、axios将token配置到请求头部的方法)