vue 前端解决跨域

造成跨域的三个场景：

1.ip(域名)相同，端口不同

2.ip不同，端口相同

3.协议不同，如一个是http，一个是https

 

解决方法：

1，前端

由于使用的webpack 初始化的vue 项目则修改如下文件：

config/index.js

module.exports = {
  dev: {

    // Paths
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    proxyTable: {
      '/api': {
        target: 'http://localhost:8099',//后端接口地址
        changeOrigin: true,//是否允许跨越
        pathRewrite: {
          '^/api': ''//重写,
        }
      }
    },

注：

前端访问服务地址：

http://localhost:8088/

后端接口地址：

http://localhost:8099/

 

前端接口访问代码：

  created() {
  },
  mounted() {
    this.initData()
  },
  methods: {
    initData() {
      this.axios.create({baseURL: '/api'}).get('/echart/echart3').then(({ data }) => {
        console.info(data)
        if (data.code === 1) {
          console.info(data.dataList)
        } else {
          console.info('error')
        }
      })
    },

　

 

虽然请求端口还是8088，但是已经成功反问到8099的数据了。

代码地址请转移：https://gitee.com/zhiqishao/echart-demo

 2.后端接口加注解解决，这样前端就不用改了