zoukankan      html  css  js  c++  java
  • vue proxyTable代理 解决开发环境的跨域问题

    如果我们项目请求的地址为 htttp://xxxx.com/a/b/c 

    可以设置代理为:

    dev:{ 

        assetsSubDirectory: 'static',// 静态资源文件夹

        assetsPublicPath: '/',// 发布路径

      proxyTable: { // 代理配置表,在这里可以配置特定的请求代理到对应的API接口 // 例如将'localhost:8080/api/xxx'代理到'www.example.com/api/xxx' // 使用方法:https://vuejs-templates.github.io/webpack/proxy.html
           '/a': {
                  target: htttp://xxxx.com/a',
                 // secure: false,  // 如果是https接口,需要配置这个参数

      changeOrigin: true,// 如果接口跨域,需要进行这个参数配置
                 pathRewrite: {
                   '^/a': ''
                 }
    }
    }

    }

    例如:接口地址原本是 /save/index,但是为了匹配代理地址,在前面加一个 /api,  因此接口地址需要写成这样的即可生效 /api/save/index。

    注意: '/api' 为匹配项,target 为被请求的地址,因为在 请求的 url 中加了前缀 '/api',而原本的接口是没有这个前缀的,所以需要通过 pathRewrite 来重写地址,将前缀 '/api' 转为 '/'。如果本身的接口地址就有 '/api' 这种通用前缀,就可以把 pathRewrite 删掉。

    项目中常见的:

    项目中请求的地址应该为 axios.get('/a/b/c'),代理解析时会在a前面加上" htttp://xxxx.com"变成了" htttp://xxxx.com/a/b/c",
    当项目打包上线时,代码里的请求地址不需要改动,因为当线上代码运行时,遇到
    axios.get('/a/b/c') ,a前面有个‘/’代表根目录的意思。
    所以‘/a/b/c’会被解析为 postname+port+'a/b/c',所以请求地址为 ‘
    htttp://xxxx.com/a/b/c’。

  • 相关阅读:
    html5 中的 css样式单 的 两种调用方式的区别
    互联网公司的相关人员及业务简介
    require.js 入门学习-备
    IOS修改webView背景透明以及IOS调用前台js的方法
    Javascript AMD模块化规范-备用
    Meta 的两个 相关属性
    <meta http-equiv="pragma" content="no-cache"/>
    css:中文词不断开,整体换行
    linux驱动开发---导出内核符号
    web html 防盗链
  • 原文地址:https://www.cnblogs.com/huoerheaven/p/9701125.html
Copyright © 2011-2022 走看看