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.后端接口加注解解決，這樣前端就不用改了