请教一下vue使用ajax的跨域问题

[dl348]

本人刚开始学习vue，想写一个案例，是通过axios进行ajax访问。看了网上各种教程，其做法都是修改proxyTable。

我在index.js的proxTable设置如下：

module.exports = {
  dev: {

    // Paths
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    proxyTable: {
      '/api':{
        target: "http://api.douban.com/v2",
        changeOrigin:true,
        pathRewrite:{
            '^/api':'/'
        }
      }
    },

    // Various Dev Server settings
    host: 'localhost', // can be overwritten by process.env.HOST
    port: 8081, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined

在vue 文件中，写一个testAjax的方法

methods: {
    mdEditWord () {
      console.log(this.newWord)
      var but1 = document.getElementById('but-login')
      console.log(but1.value)
      this.userName = this.newWord
    },
    testAjax () {
      console.log('开始尝试ajax')
      this.$axios({
        method: 'get', // 指定请求方式
        // url: "/business-app/getCityShopList.cgi",// 请求接口（相对接口，后面会介绍到）
        url: '/api/movie/top250',
        data: {
          doctorId: this.newWord
        }
      })
        .then(function (res) {
          // 接口成功返回结果执行
          console.log('ajax 成功')
          console.log(res)
        })
        .catch(function (err) {
          // 请求失败或者接口返回失败或者.then()中的代码发生错误时执行
          console.log('ajax 失败')
          console.log(err)
        })
    }
  }

但是浏览器输出的访问路径是http://localhost:8081/api/movie/top250，并且报404错误。我是哪里设置错了吗？


该目标地址，我通过postman测试过，是可以有返回数据的

[ZeroOverture]

你要访问的路径不带v2xxx 而你代理的路径是带API的 把你 target 的v2去掉 /api:改成/v2

[dl348]

我试了下，还是不行，我特意重新开一个全新的项目来测试，也是相同的问题。

引用 1 楼 ZeroOverture 的回复:

你要访问的路径不带v2xxx 而你代理的路径是带API的 把你 target 的v2去掉 /api:改成/v2

[ZeroOverture]

你的配置有问题，我直接发给你看我这个配置你试试，记得改配置要重启项目
测试结果


代理设置

axios执行

[dl348]

后来，我添加了另一组代理，那一组代理ok了~我到现在还不明白，为什么换一个代理名字，就可以跨域了。有没有哪位大神解答一下？

1、在index.js文件中，两者的差异只是代理名字不同而已


2、在vue的methods中，代码也是几乎一样的

[dl348]

上一个回复不全，这里补充完整
2、在vue的methods中，代码也是几乎一样的


3、在浏览器中，却是一个失败404，一个成功获取数据

[@小盆友]

楼主 我想问下，api的那个代理好使了么？我也遇到同样问题了，求解

[dl348]

引用 6 楼 ShIcily 的回复:

楼主 我想问下，api的那个代理好使了么？我也遇到同样问题了，求解

api那个代理只是开发阶段可以用的。live环境还是要用nginx去处理。只要配好了还是挺好用的。不过我建议你在使用api代理时，封装一个接口方法。不要每个api接口都直接调用代理的地址。

[@小盆友]

你的URL地址写的不对吧。你试一下把Ajax的url修改成下面这样：
url："api/move/top250"