zoukankan      html  css  js  c++  java
  • Vue ajax跨域请求

    Vue webpack-dev-server实现跨域请求

    思路

    配置webpack-dev-server,代理某一个路径到目标路径,同是更改源和重写

    Vue里定义一个全部变量:site
    Vue.prototype.site = '/api/';
    此后发送的ajax请求都使用此变量来组合(为了方便管理,当需要更改时直接更改次变量)

    设置webpack的代理和重写
    在 config/index.js里修改dev选项

     dev: {
        env: require('./dev.env'),
        port: 8080,
        autoOpenBrowser: true,
        assetsSubDirectory: 'static',
        assetsPublicPath: '/',
        proxyTable: {
          '/api':{
            target:'http://xxxx.com/api',
            changeOrigin:true,
            pathRewrite:{
                '^/api':''
            }
          }
        },
    

    主要看proxyTable选项:
    /api 是要代理的目录,target 是目标URL,即后台接口的真正位置
    changeOrigin 为是否修改源,当时用ajax且跨域测试时需为true
    pathRewrite 为路由重定向

    工作流程:
    当检测到有URL请求且是/api 路径时就修改请求URL,把请求URL中的/api 替换为target里的值,同时改变源让浏览器认为不是跨域请求
    example: 我发送一个ajax请求,路径为 /api/test.php ,那修改后真实请求的url就是 http://xxxx.com/api/test.php

    注意 因为部署到服务器上时不再使用webpack,所以你需要修改ajax请求的url,当你使用之前说的全局变量时只需要修改下全局变量就好
    ,更好的实践是根据部署代码的位置和后台api的未知来设置需要代理的路径
    假如部署的前端代码index.html在根目录下,后台api在/test/下,那么把代理路径设置为/test更胜一筹

  • 相关阅读:
    vsftp 虚拟用户测试
    RHEL7 MariaDB测试
    安装xenapp后,非管理员连接RDP出现桌面当前不可用的解决方法
    sqrt函数的实现
    O2O、C2C、B2B、B2C
    libsvm使用说明
    如何确定最适合数据集的机器学习算法
    知乎日报:她把全世界的学术期刊都黑了
    逻辑回归应用之Kaggle泰坦尼克之灾
    非均衡数据分布的分类问题
  • 原文地址:https://www.cnblogs.com/scarecrowlxb/p/6744908.html
Copyright © 2011-2022 走看看