proxy 跨域 vue 以及axios简要使用

config -》index.js

dev：{

env: require('./dev.env'),
        port: process.env.PORT || 8081,
        autoOpenBrowser: true,
        assetsSubDirectory: 'static',
        assetsPublicPath: '/',
        proxyTable: {
        '/api': {
        target: 'http://suneee.dcp.weilian.cn/',//设置你调用的接口域名和端口号 别忘了加http
        changeOrigin: true,
        pathRewrite: {
          '^/api': '/'//这里理解成用‘/api’代替target里面的地址，后面组件中我们掉接口时直接用api代替 比如我要调用'http://40.00.100.100:3002/user/add'，直接写‘/api/user/add’即可
        }
      },//可以配置多个代理 设置同上
        },
        // CSS Sourcemaps off by default because relative paths are "buggy"
        // with this option, according to the CSS-Loader README
        // (https://github.com/webpack/css-loader#sourcemaps)
        // In our experience, they generally work as expected,
        // just be aware of this issue when enabling this option.
        cssSourceMap: false

}
           

这里跨域就解决了

使用eg：

.get("/api/接口")

详细步骤：

由于vue-resourece官方停止维护，所以转向了axios，github上一万三千多的star, 足以证明其强大。 一个登录的场景，用axios发送post请求去登录，能成功返回数据，但是用作权限验证的cookie就是没有保存,经查阅，axios 默认不发送cookie，跨域也是一个原因，需要全局设置

axios.defaults.withCredentials = true
           

相关阅读：withCredentials

将axios发送的数据格式转换为form-data格式

//npm install axios的时候默认会安装qs
// qs相关的问题请搜索"nodejs qs"或者看这里https://www.npmjs.com/package/qs
import qs from 'qs';

// 将请求数据转换为form-data格式
// 这里不用qs，用FormData也可以，不赘述
var data = qs.stringify({
  currentPage: "0",
  pageSize: "10",
  type: "1",
});

axios.post('/url', data)
.then(function (response) {
    //
})
.catch(function (error) {
//
});
           

Vue-cli proxyTable 解决开发环境的跨域问题

相关阅读： API proxy

http-proxy-middleware

package

在vue-cli的config文件index.js里有一个参数叫proxyTable

proxyTable: {
  '/list': {
    target: 'http://api.xxxxxxxx.com',
    changeOrigin: true,
    pathRewrite: {
      '^/list': '/list'
    }
  }
}
           

这样我们在写url的时候，只用写成/list/1就可以代表api.xxxxxxxx.com/list/1.

那么又是如何解决跨域问题的呢？其实在上面的'list'的参数里有一个changeOrigin参数，接收一个布尔值，如果设置为true,那么本地会虚拟一个服务端接收你的请求并代你发送该请求，这样就不会有跨域问题了，当然这只适用于开发环境。增加的代码如上所示