Vue + Flask 解决跨域限制问题

跨域限制的由来

目的：为了安全考虑

触发情景：

1. 浏览器从一个域名的网页去请求另一个域名的资源时，域名、端口、协议任一不同。如在页面强用ajax获取其他异步请求向其他网络地址发起请求。
2. 只要协议、域名、端口有任何一个不同，都被当作是不同的域，之间的请求就是跨域操。

Flask 所做跨域处理

使用 flask_cors，对服务进行处理

from flask_cors import *
app = Flask(__name__)
CORS(app, supports_credentials=True)

Vue所做的跨域处理

在\config\index.js找到相应位置，添加下列代码。

module.exports = {
  dev: {
    proxyTable: {
      '/api': {
        target: 'http://localhost:500',
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''   //实际请求去掉/api以空字符串代替
  
        }
      }
    }
}

该代码的意义是 对请求url为 /api，进行转换，转换为 target所指的地址，但是根据自定义的路由机制将开头的/api去除。

实现效果是 当vue中请求url为'/api/test'，在经过转化往后，vue服务的请求url是'http://localhost:5000/test'