Vue-Axios跨域-如何解决跨域问题

应用场景

开发过程中，前台跟后台需要进行数据交互，由于浏览器安全机制，直接使用axios会产生跨域问题，访问不到后台数据，因此我们需要配置代理。

解决方案

代理解决跨域的解释：
客户端直接请求服务端的数据会存在跨域问题，但是服务器和服务器之间可以直接请求数据，并没有跨域的问题（在服务器没有设置禁止跨域权限的情况下）。
所以，我们可以配置一个代理服务器请求另一个服务器中的数据，然后把请求出来的数据返回到我们的代理服务器中，代理服务器再把数据返回到我们的客户端，这样做就可以跨域访问后台的数据。

代理配置

步骤一：在config/index.js里面修改 module模块。

var baseUrl = 'http://10.1.3.34:8060'

dev: {
    // Paths
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    //跨域请求配置
    proxyTable: {
      '/api': {
        target: baseUrl,
        changeOrigin: true,//是否跨域 开启代理：在本地创建一个虚拟服务器
        ws: true,//是否代理websockets
        secure: false,//如果是https接口，需要配置这个参数
        pathRewrite: {'^/api': '/'} //重写路径
      }
    },

    // Various Dev Server settings
    host: '10.1.3.8', // can be overwritten by process.env.HOST
    port: 8080, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
    autoOpenBrowser: false,
    errorOverlay: true,
    notifyOnErrors: true,
    poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions-
    
  },

步骤二：在 main.js修改配置。

/** global config */
axios.defaults.baseURL = '/api' //作用是在每次发送的请求路径中都会带一个/api的前缀。

步骤三：在使用axios发送请求的时候，写相对路径

axios.get("/zlhj_interface/completeScreen/queryResult").then((res) => {
                   console.log(res.data.data)
                }).catch((error) => {
                  console.log(error)
                })

恭喜你！到此为止你的跨域配置已完成！

// An highlighted block

---

或许，你有自己封装的axios文件request.js，那么你需要这样修改。

/** global config */
request.defaults.baseURL = process.env.API_HOST;

如果你像这样修改了，那么你还需要进行以下的配置：

1.在 dev.env.js修改配置。

module.exports = merge(prodEnv, {
  NODE_ENV: '"development"',
  API_HOST:'"/api/"'
})

2.在 prod.env.js修改配置。

module.exports = {
  NODE_ENV: '"production"',
  API_HOST:'"http://192.168.88.62:8080"'
}

3.在 api.js中封装好方法，到时候在需要用到的时候引入改方法并直接使用。

export function checkCarModel(Vin) {
  return request({
    method: 'post',
    url:'/zlhj_interface/carinfo/queryCarModel',
    data:{vin:Vin}
  })
}

4.在 vue引入改方法并直接使用。

import { checkCarModel } from "../../request/api";

 checkCarModel(Vin).then(res => {
    console.log("res.data.data",res.data.data);
 })
 

恭喜你！请求成功！