zoukankan      html  css  js  c++  java
  • webpack+vue-cli中代理配置(proxyTable)

    在做vue的项目时,用到webpack打包工具,我们会发现本地开发开启的node服务地址请求接口的地址存在跨域问题。本地开启的服务地址是

    http://localhost:8080

    而服务器的地址是

    http://192.168.28.92:9096/api/

    如果在你的axios请求中直接写服务器的地址进行请求,就会发生跨域的问题。如下

    这就需要webpack中的proxytable代理进行配置,来解决这个跨域的问题。

    在config/index.js文件中:

    dev: {
    
        // Paths
        assetsSubDirectory: 'static',
        assetsPublicPath: '/',
        proxyTable: {
          '/api':{
            target: 'http://192.168.28.92:9096',
         // secure: false,// 如果是https接口,需要配置这个参数 changeOrigin:
    true,//接口跨域,则需要进行这个参数配置
         //pathRewrite: {
         // '^api': '' //如果接口本身没有/api,则需要通过pathRewrite来重写
         //} } }, }

    当你的服务器接口地址是:

    http://120.79.61.208:36912/shop/

    此时接口地址中没有/api

    则需要通过pathRewrite对接口进行重写

    proxyTable: {
          '/api':{
            target: 'http://192.168.28.92:9096',
         // secure: false,// 如果是https接口,需要配置这个参数
            changeOrigin: true,//接口跨域,则需要进行这个参数配置
         pathRewrite: {
          '^api': '' //如果接口本身没有/api,则需要通过pathRewrite来重写
         }
          }

    则在axios请求中的url:

  • 相关阅读:
    oracle之修改/忘记用户密码
    linux 使用错误总结
    oracle数据库之用户管理
    linux命令使用总结
    linux各种压缩包的压缩和解压方法
    logback将日志写入不同文件夹里
    nginx下配置多个web服务
    OKHttp3学习
    linux 发送 post 请求
    maven 项目下 Maven Dependencies 下列表为空
  • 原文地址:https://www.cnblogs.com/zengfp/p/9648031.html
Copyright © 2011-2022 走看看