如何解决前端跨域问题

跨域是前端工作中很常见的现象, 那我们该如何解决跨域问题呢? 首先应该要知道:

• 什么是跨域?
• 如何使用跨域?
• 如何使用proxy解决Vue开发环境的跨域

什么是跨域?

跨域实际上也叫做非同源策略请求。 谈到跨域问题，我们必须先了解一下什么是同源策略？

同源策略：它是由Netscape提出的一个著名的安全策略。现在所有支持JavaScript 的浏览器都会使用这个策略。所谓同源是指，域名，协议，端口相同。

域名，协议，端口，三者全部相同就是同源，其中一个不同就是**跨域**

web服务器：  http://127.0.0.1:3000
接口地址：    http://127.0.0.1:4000

在这个栗子中，域名相同，协议相同，端口号不一样，就是跨域

跨域的解决方案:

JSONP实现跨域
基于script无跨域限制帮我我们带到服务器上，然后利用callback回调函数做一些我们想做的事,但是它只支持 GET 方法

详细的介绍可以参考这篇文章:https://juejin.cn/post/6844903607070900238

2、CORS实现跨域
CROS（Cross-Origin Resource Sharing）跨源资源分享。
CROS通信的主要在于服务器，只要服务器实现CROS接口，就可以实现跨域请求。
详细的介绍可以参考阮一峰老师的这篇文章：http://www.ruanyifeng.com/blog/2016/04/cors.html
3、 Vue项目中使用proxy 解决开发环境的跨域
这是我想重点介绍的，因为好多前端页面是基于vue实现的，前端使用vue-cli脚手架搭建的vue项目做开发的时候，项目本身启动本地服务需要占用一个端口。我们在与后端服务器接口联调的时候，一定会产生跨域问题。大多数公司都是采用前后端分离的开发模式，必然会产生跨域。我们尽量在前端去解决跨域问题，避免更改后端代码。
在 Vue 项目 vue.config.js 中配置

module.export = {
    ...
    devServer: {
        proxy: {
               '/api': {
                target: 'http://xxxx',//代理跨域目标接口
                }
            }
        }
    }
}
如果请求地址以 /api 打头,就出触发代理机制

参考文档:
https://juejin.cn/post/6844903767226351623
https://juejin.cn/post/6846687602439880717