53.vue跨域(使用代理服务器)请求数据

最新推荐文章于 2023-03-31 17:21:13 发布

修罗_

最新推荐文章于 2023-03-31 17:21:13 发布

阅读量257

点赞数

分类专栏： VUE 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_45843676/article/details/123065249

版权

VUE 专栏收录该内容

93 篇文章 2 订阅

订阅专栏

这是我的后台服务器拿到数据链接http://localhost:8089/findStudent

得到[{“id”:“001”,“name”:“llx”,“age”:24},{“id”:“002”,“name”:“蜡笔小新”,“age”:5},{“id”:“003”,“name”:“孙悟空”,“age”:19}]

配置代理vue.config.js

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  pages:{
    index:{
      entry:'src/main.js'
    }
  },
  lintOnSave:false,
  transpileDependencies: false,
  // 开启代理服务器
  devServer: {
    proxy: 'http://localhost:8089'
  }
})

App.vue

<template>
  <div id="app">
    <button @click="getStudents">获取学生信息</button>
  </div>
</template>

<script>
import axios from 'axios';
export default {
  name: 'App',
  methods: {
    getStudents() {
      // 请求会遇到跨域问题，不同端口属于跨域
      // 解决办法
      // 1.cors 2.jsonp 3.代理服务器
      // 这里通过配置代理服务器访问
      // 8080->代理->8089
      axios.get('http://localhost:8080/findStudent').then(
        response=>{
          console.log('请求成功了',response.data);
        },
        error=>{
          console.log('请求失败了',error.message);
        }
      )
    },
  },
}
</script>

<style scoped>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  margin-top: 60px;
}
</style>

import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app');

index.html

<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title><%= htmlWebpackPlugin.options.title %></title>
  </head>
  <body>
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>