vue2.6之处理跨域

这是我参与更文挑战的第10天，活动详情查看： 更文挑战

如题所示，今天来介绍下怎么在这个 vue 中处理这个跨域问题~ （主要也是之前学 vue 时踩的坑🕳 哈哈）

跨域介绍

跨域是是由浏览器的同源策略造成的，同源策略是一个安全措施！能减少XSS、CSFR等的攻击。

同源是指，域名，协议，端口均相同

出现跨域 的原因 就有

1. 协议不同
2. 域名不同
3. 端口不同

处理

之前在java后端项目中，只要加个注解 @CrossOrigin 就可以解决这个问题，当热也可以通过Nginx 做反向代理就好了，但是现在需要在前端解决

怎么解决呢？

1. 回到我们之前使用过的 webpack 。

   webpack官网之devServer

   

2. vue中devServer的使用

在 vue.config.js 中配置如下代码即可

module.exports = {
  configureWebpack: {
    devServer: {
      proxy: {
        '/api': {
          target: 'http://192.168.101.110:8888',
          // 在本地会创建一个虚拟服务端，然后发送请求的数据，并同时接收请求的数据，这样服务端和服务端进行数据的交互就不会有跨域问题
          changeOrigin: true,
          ws: true
          // ,
          // pathRewrite: {
          //   '^/api': '/api'
          //   // 替换target中的请求地址，也就是说以后你在请求http://api.jisuapi.com/XXXXX这个地址的时候直接写成/api即可
          // }
        }

      }
    }
  }
}

这样就可以解决跨域问题了~

当然还有其他很优秀的方案，也是无意中发现的，请看下面~

文章推荐！：

下面这篇文章非常全面的概括了怎么处理跨域这个问题！

包括下面这些👇

跨域解决方案

1、 通过 jsonp 跨域

2、 document.domain + iframe跨域

3、 location.hash + iframe

4、 window.name + iframe跨域

5、 postMessage跨域

6、 跨域资源共享（CORS）

7、 nginx代理跨域

8、 nodejs中间件代理跨域

9、 WebSocket协议跨域

涨知识了！😝

👉 前端常见跨域解决方案（全）

最后

欢迎小伙伴们来一起探讨问题~

如果你觉得本篇文章还不错的话，那拜托再点点赞支持一下呀😝

让我们开始这一场意外的相遇吧！~

欢迎留言！谢谢支持！ヾ(≧▽≦*)o 冲冲冲！！

我是4ye 咱们下期很快再见！！