解决跨域问题的三种方法(json[、cors、反向代理)

一、JSONP(json with pendding)

	A网站的网页在代码上访问了B网站的页面,解决主流浏览器的跨域访问问题 
	No 'Access-Control-Allow-Origin'
	同源策略阻止跨域访问
	同源策略:同ip,同端口,同协议

工作原理

前端使用一个 script 标签来创建一个 HTTP 请求，并且事先声明一个回调函数，
该回调函数的名字由 callback 参数的参数值发送给后端。
后端接收到来自前端的请求后利用 callback 参数的参数值和要给前端返回的数据拼接成一段 JS 执行函数的代码段，
此时实参就是要返回给前端的数据。
前端接收到后端返回的结果后，会自动的执行事先声明好的回调函数，此时函数的形参就代表了后端要返回的数据。

二、cors(Cross-origin resource sharing):跨域资源共享

它允许浏览器向跨源服务器发出XMLHttpRequest请求，克服AJAX只能同源使用的限制。
两种请求：简单请求和非简单请求

1.简单请求:简单请求，浏览器直接发出CORS请求。具体来说，就是在头信息之中，增加一个
Origin字段。
（1) 请求方法：head,get,post
（2）HTTP的头信息为以下字段：accept,accept-language,content-language,
last-event-ID,content-type：只限于三个值application/x-www-form-urlencoded、
multipart/form-data、text/plain;

2.非简单请求:非简单请求是那种对服务器有特殊要求的请求，比如请求方法是PUT或DELETE，
或者Content-Type字段的类型是application/json。非简单请求的CORS请求，会在正式通信
之前，增加一次HTTP查询请求，称为"预检"请求.浏览器先询问服务器，当前网页所在的域名是
否在服务器的许可名单之中，以及可以使用哪些HTTP动词和头信息字段。只有得到肯定答复，
浏览器才会发出正式的XMLHttpRequest请求，否则就报错。

三、反向代理

生产（发布）环境：

​ 1）、如果还是前后端分离（在不同的服务器上）。依然有跨域问题（nginx）

​ 2）、如果前后端代码在一起（一个服务器），不存在跨域问题

正向代理隐藏真实客户端，反向代理隐藏真实服务端。 
在前后端联调的情况下，前端有服务器，后端也有服务器，那么联调时，就存在跨域问题
通过伪造请求使得http请求为同源的，然后将同源的请求发送到反向代理服务器上，由反向代理服务器去请求真正的url，这样就绕过直接请求真正的url导致跨域问题。

vue-cli2.x里反向代理使用步骤和配置

1、安装axios与http-proxy-middleware（vue-cli中默认已经安装）
2、在config/index.js中的dev中配置
3、在dev配置对象中找到proxyTable:{  }
4、添加如下配置（把对“/api”开头的访问转换成对 http://www.itzhihu.cn的访问）:
​   proxyTable: {
​     '/api': {  // 要替换的地址，在本地新建一个/api的访问路径 。
​     		target: 'http://www.itzhihu.cn',  // 替换成啥，要访问的接口域名 。
​    		changeOrigin: true,  // 是否跨域 
  			pathRewrite: {
​        	'^/api': ''    //重写接口，去掉/api， 在代理过程中是否替换掉/api/路径 
​     			}
  		}
​    }
这样以后访问以“/api”开头的地址都会转向http://www.itzhihu.cn的访问

vue-cli3+配置反向代理

打开（新建）项目根/vue.config.js， 写上如下代码：

module.exports = {
  devServer:{
    //设置代理
    proxy: { //代理是从指定的target后面开始匹配的，不是任意位置；配置pathRewrite可以做替换
      '/api': { //axios访问 /api ==  target + /api
       		 target: 'http://localhost:3001',
       		 changeOrigin: true, //创建虚拟服务器 
          	pathRewrite: {
                '^/api': ''    //重写接口，去掉/api， 在代理过程中是否替换掉/api/路径 
     		}
      	}
      }
   }
}

注意：
1、修改完 vue.config.js文件后，必须要重启服务器
2、如果你复制了笔记上的代码，而且出现问题，那么，删掉看不见的中文空格和注释。