一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第20天，点击查看活动详情。

跨域深入了解

什么是跨域

跨域指的是浏览器在一个网站中不能执行其他网站的脚本，是浏览器的同源策略引起的，是浏览器带有的安全限制。

同源策略

同源策略指发起ajax请求的时候，协议、域名、端口号 必须和服务器一致，三者任意一个不一致都会产生跨域。

为什么要有跨域

因为为了浏览器的安全考虑，如果没有跨域，那就会出现浏览器页面套浏览器页面，表面上访问的是支付宝页面，实际是别人做的网页，一样都能够实现功能，但是账号密码却被 实时监控，这样会浏览器造成很大的安全隐患，因此有了同源策略，极大地保障了浏览器的安全功能。

可以说Web是构建在同源策略基础智商的，浏览器是通过同源策略实现的，同源策略会阻止一个域的javaScript脚本和另一个域的内容实现交互。

如何解决跨域

目前解决跨域的主要有三种方法：

方式一：使用JSONP

这个方式出现的比较的久远了，是刚开始出现跨域问题的时候，程序员解决跨域问题的一种方法，主要原理是：因为script标签的src可以访问网络上的资源，并且可以拿到响应体，但是有一定的局限性，只能发送get请求，get请求有一定的安全隐患，现在基本不用了。

方式二：CORS（跨域资源共享）

CORS允许浏览器向跨源服务器，发出XMLHttpRequest请求，从而克服了AJAX只能同源使用的限制。最简单的就是使用 HttpServletResponse 对象添加响应头(Access-Control-Allow-Origin)来授权原始域，这里 Origin的值也可以设置为 “*”,表示全部放行

例如：

 public String index(HttpServletResponse response) {
     response.addHeader("Access-Allow-Control-Origin","*");
     return "index";
 }

方式三：利用代理服务器法

因为有跨域的限制，所以，前端可以先使用node自建一个代理服务器，利用proxy解决跨域问题，先可以在vue.config.js配置文件：

 module.exports = {
     devServer:{
         proxy:{
             '/api':{
             // 当你请求是以/api开头的接口，则我帮你代理访问到http://localhost:3000
                 target:'http://localhost:3000',
                 pathRewrite:{
                     '^/api':''
                 }
             }
         }
     }
 }

具体的逻辑可以简单理解为：