前端-vue解决跨域问题

最新推荐文章于 2024-11-11 23:32:58 发布

lxslxskxs

最新推荐文章于 2024-11-11 23:32:58 发布

阅读量464

点赞数

分类专栏： vue 笔记文章标签： vue.js 前端前端框架

本文链接：https://blog.csdn.net/lxs19930928/article/details/121480455

版权

笔记同时被 2 个专栏收录

45 篇文章 1 订阅

订阅专栏

vue

27 篇文章 4 订阅

订阅专栏

前端解决跨域问题

新建server.js

 yarn add express
 const express = require("express")

const app = new express();


app.get('/user', function(request, response) {
	response.send('hello World')
})

app.listen(5000, function() {
	console.log("Server is running ....")
})
ip地址就是http:localhost:5000
启动服务 node server.js

新建vue.config.js

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target:'http://localhost:5000',  //target代理的就是后端接口
        changeOrigin:true,
        pathRewrite:{
          '^/api': ''
        }
      }
    },
  },
}

<script>
import axios from 'axios'
export default {
  data() {
    return {

    }
  },
  methods: {
    getData() {
      // 匹配到/api以后直接设置为空
      axios.get("/api/user").then(res => {
        console.log("res",res)
      })
    }
  },
  mounted() {
    console.log("axios",axios)
    this.getData()
  }
}
</script>