Vue中的跨域问题

什么是跨域?

跨域问题其实就是浏览器的同源策略所导致的。

「同源策略」是一个重要的安全策略,它用于限制一个origin的文档或者它加载的脚本如何能与另一个源的资源进行交互。它能帮助阻隔恶意文档,减少可能被攻击的媒介。

MDN

什么是同源呢?

协议+域名+端口,三者一致认为是同源

例如:

http://www.baidu.com:8080http://www.baidu.com:8081二者端口不一样,跨域

http://www.jingdong.comhttp://www.baidu.com二者域名不一样,跨域

https://www.baidu.comhttp://www.baidu.com二者协议端口都不一样,跨域(https://默认端口443,http://默认端口80)

http://www.baidu.com/a.jshttp://www.baidu.com/b.js,这两者是同源的

怎么解决跨域

  • 通过jsonp跨域
  • document.domain + iframe跨域
  • location.hash + iframe
  • window.name + iframe跨域
  • postMessage跨域
  • 跨域资源共享(CORS)
  • nginx代理跨域
  • nodejs中间件代理跨域
  • WebSocket协议跨域

加粗为常用,jsonp基本过时,了解一下原理

JSONP

在发送Ajax请求时,不论请求的资源是何种类型都通不过同源策略,但是!!!你会发现<script>、<img>、<iframe>等没有这种限制。然后,js是支持json的,那么把json数据放到js中就可以接收了。废话少说上代码

<!--本地请求-->
<script>
  var local = function(data) {
    console.log('请求到的数据是:', data);
  }
</script>
<script src="/js/jsonp.js"></script><!--可以是请求接口-->

<!--服务器(js)-->
local('data from jsonp!')

然后运行页面

image-20200907174021099

完事,这就是jsonp,jquery的ajax中也提供了jsonp的请求方式,缺陷只能发送GET请求

u=2655749354,1573101008&fm=26&gp=0

CORS

普通跨域请求:只服务端设置Access-Control-Allow-Origin即可,前端无须设置,若要带cookie请求:前后端都需要设置。

Vue跨域解决

在vue.config.js中配置跨域,注释已经很清楚了吧,不懂可以QQ,微信,电邮问我

module.exports = {
  devServer: {
    host: "localhost",
    port: 8000, // 端口号
    https: false, // 是否https
    open: true, //配置自动启动浏览器
    // proxy: 'http://127.0.0.1:8080' // 配置跨域处理,只有一个代理

    // 配置多个代理
    proxy: {
      '/socket.io': {
        target: 'http://127.0.0.1:7001/', // 要访问的接口
        ws: true, // 是否启用websockets
        changeOrigin: true, //开启代理:在本地会创建一个虚拟服务端,然后发送请求的数据,并同时接收请求的数据,这样服务端和服务端进行数据的交互就不会有跨域问题
        pathRewrite: {
          '^/api': '' //在请求中用'/api'代替target里面的地址,比如我要调用'http://40.00.100.100:3002/user/add',直接写'/api/user/add'即可
        }
      },
    }
  }
};

u=3622537696,2785286691&fm=26&gp=0


前端小白