跨域限制的由来

目的:为了安全考虑

触发情景:

  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'

Logo

前往低代码交流专区

更多推荐