【Vue】前端解决跨域问题

Vue解决跨域问题

什么是跨域：违背了同源策略，即协议名、主机名、端口号必须一致。浏览器与服务器之间存在跨域问题，而服务器与服务器之间由于通过Http通信是不存在跨域问题的。



    如图所示，浏览器端口号8080与服务器5000不一致导致跨域问题，需要注意的是跨域问题并不是没有发送响应请求，而是在服务器响应给浏览器时，浏览器发现跨域而将数据隐藏了起来

解决跨域的策略

1 cors

大致思路：服务器在响应给浏览器数据时会在响应体中携带一些特殊的响应头，以告知浏览器可以无视跨域问题。

但是在开发中响应头是不能随便修改的，而且这种策略需要完全由后端进行

2 jsonp

大致思路：利用script标签的src属性不受同源跨域问题影响的特性

但是需要前后端同时进行修改，而且只能处理get请求

3 使用代理服务器（常用）

如此一来，8080端口的浏览器端和8080代理服务器通过ajax请求通信就不存在跨域问题，而且同时服务器和代理服务器是通过http通信，更不存在跨域问题

代理服务器的配置 方式一

vue.config.js

module.exports = {
  pages: {
    index: {
      entry: 'src/main.js'
    }
  },
  devServer: {
    proxy: 'http://localhost:5000'
  }
  }

同时修改前端页面的请求端口号为代理服务器的8080

代理服务器的配置 方式二

    devServer: {
    proxy: {
      // 路径中出现'/hikaru'时，代理服务器就开始工作
      '/hikaru': {
        // 目标服务器
        target: "http://localhost:5000",
        // 路径重写
        pathRewrite: {'^/hikaru':''},
        // 用于启用webSocket，webSocket也是客户端和服务器的通信方式
        ws: true,
        // 用于修改修改来源，为true则修改来源为与目标服务器相同
        changeOrign: true
      }
    }
  }