解决跨域问题

什么是跨域

• 当协议，域名，端口任意一个与当前页面的url不同，即为跨域；
• 

#### 同源策略

• 同源策略是浏览器的基本安全功能，少了同源策略容易受到xss， csfr攻击，所谓同源就是协议域名端口三者相同，即便两个不同的域名指向同一个ip也非同源；
• 

解决跨域的方法

jsonp

• 通过不受跨域限制的标签去调用后台接口，同时在接口地址添加回调函数，用于告诉后台人员前端定义了某个函数名是什么，后台调用这个传入的函数同时传入提供给前端的参数，这样就实现了跨域请求接口；
  
• 

CORS

• 后台人员通过设置

header["Access-Control-Allow-Origin": "*"]

• 后台人员通过添加以上代码，即可解决跨域问题
  

代理Proxy

原理：

• 浏览器会跨域，但是服务器是不存在跨域问题的，前端在调用接口不直接访问服务器，而是访问代理服务器，浏览器和代理服务器是相通的，所以前端请求代理服务器，代理服务器进行数据转发，有代理服务器请求服务器数据，服务器将数据给到代理服务器，代理服务器再返回给浏览器，从而解决跨域问题；

• vue中配置vue.config.js文件添加代理；这种方式只能用于开发环境，生产环境需要使用nginx反向代理，需要运维人员进行配置；