跨域不成功

module.exports = {
  // http://localhost:8080/api/test
  // =>
  // http://localhost:8080/test

  devServer: {
    proxy: {
      '/api': {
        // target: 'http://localhost:8080',
        target: 'http://django.t.mukewang.com',
        changeOrigin: true,
        pathRewrite: {
          // '^/api': ''   // 需要重写的URL
        }
      }
    }
  }
}

<template>
  <div class="page-home">
    <h1>旅游网</h1>
  </div>
</template>

<script>
// @ is an alias to /src
// import axios from 'axios'
import { ajax } from '@/utils/ajax'

export default {
  name: 'HomeView',
  components: {
  },
  created () {
    // ajax.get('http://django.t.mukewang.com/api/system/slider/list/?types=11').then(resp => {
    ajax.get('http://localhost:8081/api/system/slider/list/?types=11').then(resp => {
      console.log('返回的结果：', resp)
    }).catch(err => {
      console.log('请求出错：', err)
    })
  }
}
</script>
<style lang="less" scoped>
.page-home {

}
</style>

慕九州ing 2024-04-03

源自：Django+Vue全栈开发慕旅游网首页 3-1 跨域问题解决（上）

收起

1回答

好帮手慕小猿 2024-04-03 12:06:14

同学，你好！同学代码没有问题，由于网站 http://django.t.mukewang.com 有变更。访问http://django.t.mukewang.com/api/system/slider/list/?types=11 没有内容

访问http://localhost:8081/api/system/slider/list/?types=11时跳转到http://django.t.mukewang.com/api/system/slider/list/?types=11也是没有内容的，所以跨域是失败的。建议先理解代码，有机会再尝试跨域操作。

祝学习愉快~

收起回答

提问者慕九州ing #1

在Django中的跨域，使用 ajax.get('http://127.0.0.1:8000/hello/world/')可以成功访问，但在vue.js解决跨域，访问不成功？

ajax.get('http://localhost:8081/test/hello/world/').then(resp => {
      console.log('返回的结果：', resp)
    }).catch(err => {
      console.log('请求出错：', err)
    })

module.exports = {
  devServer: {
    proxy: {
      '/test': {
        // django中的url地址及端口号
        target: 'http://localhost:8000',
        changeOrigin: true,
        pathRewrite: {
          '^/test': ''   // 需要重写的URL
        }
      }
    }
  }
}

2024-04-03 12:58:44