创新实训——008

上一篇介绍了Vue.js（以下简称vue）的前端请求，简要说明了axios和websocket的基本使用，但是当你刚开始使用时，你会发现会报跨域错误。

跨域

跨域是浏览器的一种安全机制，基于同源策略，是指当一个请求url的协议、域名、端口三者之间任意一个与当前页面url不同即为跨域，这就可以很好避免因执行外部恶意脚本而造成损害，但是毕竟前后端要分离的话，后台和前端是两个进程要使用不同端口，所以就会造成跨域问题，我在这里提供两种在项目编写过程中可以解决跨域问题的办法。

基于后端的解决办法

像我自己基于flask编写的后端接口，跨域问题就可以在后端解决，只需引入CORSfrom flask_cors import CORS并在编写的接口前添加CORS(app, resources=r'/*')就可以了，类似的spring boot只要在编写的接口前加入@CrossOrigin(origins = "*")就可以了，websocket进行如下定义：

socketIO=SocketIO(app,cors_allowed_origins="*",async_mode=None)

下面关于CORS的介绍引自阮一峰，链接：阮一峰CORS

CORS是一个W3C标准，全称是“跨域资源共享”（Cross-origin resource sharing）。
CORS需要浏览器和服务器同时支持。目前，所有浏览器都支持该功能，IE浏览器不能低于IE10。

整个CORS通信过程，都是浏览器自动完成，不需要用户参与。对于开发者来说，CORS通信与同源的AJAX通信没有差别，代码完全一样。浏览器一旦发现AJAX请求跨源，就会自动添加一些附加的头信息，有时还会多出一次附加的请求，但用户不会有感觉。

因此，实现CORS通信的关键是服务器。只要服务器实现了CORS接口，就可以跨源通信。

上面也正好可以解释为什么跨域是浏览器做出的限制，而要在服务器端做操作，因为它们俩在标准下相互配合。

基于前端的解决办法

因为有些时候我们会调用第三方接口，所以此时就没法在后端进行处理，需要考虑基于前端的解决办法。
nginx的反向代理可以解决，我现在使用的是vue，所以要用vue自己的解决方案。
例如我在本系统中需要使用百度的定位IP位置的API，需要：

1、设置代理
在config/index.js文件下设置proxyTable如下：
proxyTable: {
      '/api': {
        target:'http://api.map.baidu.com/location/ip', // 你请求的第三方接口
        changeOrigin:true, // 在本地会创建一个虚拟服务端，然后发送请求的数据，并同时接收请求的数据，这样服务端和服务端进行数据的交互就不会有跨域问题
        pathRewrite:{  // 路径重写，
          '^/api': ''  // 替换target中的请求地址，也就是说以后你在请求http://api.map.baidu.com/location/ip这个地址的时候直接写成/api即可。
        }
      }
}
2、更改axios的请求方式
用api就可以替换http://api.map.baidu.com/location/ip这个地址的
_this.axios.get('api?ak='+_this.ak+'&ip='+newVal)
      .then(function(res){
      //console.log(res.data['status'])
      if(res.data['status']==1){
           _this1.rightMes="本地"
       }else{
           _this1.rightMes=res.data['content']['address_detail']['province']
       }
})

按照上面的解决方法已经可以满足我的使用。