zoukankan      html  css  js  c++  java
  • [vue] [axios] 设置代理实现跨域时的纠错

    # 第一次做前端工程 #

    记一个今天犯傻调查的问题

    ----------------------------------------------------------------------------------

    Front-End: Vue-Project(vue + vue-router + vuex + axios)

        地址:http://localhost:3000/

        http://localhost:3000/AModule    ----地址1:OK

        http://localhost:3000/BModule    ----地址2:OK

        http://localhost:3000/AModule/childroute    ----地址3:NG

    # 针对跨域,在 vue.config.js 文件里配置代理

    devServer: {
      proxy: {
        host: 'localhost:3000'
        target{
          "api": {
            target: "http://localhost:4000",
            changeOrigin: true
          }
        }
      }
    }

    ----------------------------------------------------------------------------------

    Back-End

        https://localhost:4000/api/xxx

    (后端用的ASP.NET Core WebAPI,在StartUp.cs里添加service时设的Cors)

    前端访问:

    axios.get('api/xxx')

    ----------------------------------------------------------------------------------

    为什么地址1,地址2访问的时候,都能正常跨域,

    地址3(子路由的时候)url就错了呢,

    变成了    https://localhost:4000/AModule/api/xxx

    应该是    https://localhost:4000/api/xxx

    给 axios 设或不设 baseURL “  https://localhost:4000  ” 都无法访问

    其实就是这里错的,axiosbaseURL 应该为

    http://localhost:3000    ----即前端工程的地址

    低级错误啊尝试了老半天,就这么简单地解决了

    作者:码路工人

    公众号:码路工人有力量(Code-Power)

    欢迎关注个人微信公众号 Coder-Power

    一起学习提高吧~

  • 相关阅读:
    如何在iTerm2中配置oh my zsh?
    sublime中格式化jsx文件
    ES6 new syntax of Literal
    ES6 new syntax of Rest and Spread Operators
    How to preview html file in our browser at sublime text?
    ES6 new syntax of Default Function Parameters
    ES6 new syntax of Arrow Function
    七牛云2018春招笔试题
    Spring-使用注解开发(十二)
    Spring-声明式事物(十一)
  • 原文地址:https://www.cnblogs.com/CoderMonkie/p/axios-proxy-baseURL.html
Copyright © 2011-2022 走看看