[14][创新实训记录]Vue跨域问题

Vue跨域问题

前后端分离常见问题——跨域问题

首先什么是跨域？

由于浏览器同源策略，凡是发送请求url的协议、域名、端口三者之间任意一个与当前页面地址不同即为跨域。

跨域通常是一下情况组成的

1. 处在不同的IP下
2. 处在同一IP下的不同端口
3. 网络协议不一致
4. 域名不同或子域名不同

出现跨域问题，跨域问题尤其是体现在Vue前端通过axios进行HTTP请求的时候展现出来的跨域问题。

出现跨域问题可以通过配置config中的index.js中的proxyTable来实现

dev: {
    env: require('./dev.env'),
    port: 8090,
    autoOpenBrowser: true,
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    proxyTable: {
      '/api': {
        target:'http://api.douban.com/v2', // 你请求的第三方接口
        changeOrigin:true, // 在本地会创建一个虚拟服务端，然后发送请求的数据，并同时接收请求的数据，这样服务端和服务端进行数据的交互就不会有跨域问题
        pathRewrite:{  // 路径重写，
          '^/api': ''  // 替换target中的请求地址，也就是说以后你在请求http://api.douban.com/v2/XXXXX这个地址的时候直接写成/api即可。
        }
      }
    },
    cssSourceMap: false
  }

我们的项目是通过后端处理跨域问题进行实现的

也就是在springboot中通过添加过滤器的方式实现了跨域问题，这里就不进行过多描述了

跨域问题的反思

对于跨域问题，我也因此想到了如果在每一个vue中的数据请求都是写好了ip的话，那么如果请求的ip发生改变的话我们是不是后端的跨域过滤器以及前端申请的接口都需要修改呢，那么我可以定义一个全局变量里写好IP，然后让所有的axios都对这个变量进行调用，那么修改的时候只需要修改一个值就可以实现了

@/api/global_variable.js

const apiURL = 'http://192.168.1.102:8181/'
export default {
	apiURL
}

vue中在js部分引入

import GLOBAL from '@/api/global_variable'
const url = GLOBAL.apiURL