前言

自动接触前端，跨域这个词就一直萦绕在耳畔。因为一般接手的项目都已经做好了这方面的处理，而且之前一直感觉对这方面模棱两可，所以今天就抽个时间梳理一下。

为什么需要跨域

跨域这个概念来自一个叫 “同源策略” 的东西。同源策略是浏览器（注意是浏览器，跟通信协议无关）上为了安全考虑实施的非常重要的安全机制。

Ajax 默认只能获取到同源的数据，对于非同源的数据，Ajax是获取不到的。

什么是同源？

• 协议相同
• 域名相同
• 端口相同

举例来说，upload/201911081656164351.png" style="margin: 0px; padding: 0px; border: 0px; max-width: 615px !important; height: auto; cursor: zoom-in !important;" alt="" />

2、webpack-dev-server 代理

我们经常在vue开发项目的时候，会用webpack作为前端自动化构建工具的话，也会使用到webpack-dev-server的插件，那么可以引用webpack-dev-server来进行配置跨域方案。

webpack-dev-server是一个小型的nodejs服务器，是基于express框架的，用于实时监听和打包编译静态资源。其中里面有一个属性是proxy，是专门来配置代理请求接口的。

你只需要在webpack.config.js中 devServer中如下设置即可：

devServer: {         port: 3000,         inline: true,         proxy: {             "/zhuiszhu": {                 target: "upload/201911081656170708.jpg" style="margin: 0px; padding: 0px; border: 0px; max-width: 615px !important; height: auto; cursor: zoom-in !important;" alt="" />