Vue跨域问题解决方案

1.跨域问题

2.模拟跨域

新建server包，下面新建index.js

const express = require("express");
const app = express();

app.get("/list",(req,res) =>{
    res.send({
        status:200,
        result:"hello"
    })
})

app.listen(3000,()=>{
    console.log("服务器运行在3000端口上");
})

后端在终端运行 cnpm i --save express 安装

然后在serve启动终端 输入node index.js启动后台

• 前端HelloWorld代码

<template>
  <div class="hello">
    
  </div>
</template>

<script>

import axios from "axios"

export default {
  name: 'HelloWorld',
  mounted(){
    axios.get("http://localhost:3000/list").then(res =>{
      console.log(res.data);
    })
  }
}
</script>

2.后台解决

cors解决跨域问题

• 前端在终端安装，npm install cors --save
• 在server包代码加上

const express = require("express");
const app = express();
const cors = require("cors")

app.use(cors())
app.get("/list",(req,res) =>{
    res.send({
        status:200,
        result:"hello"
    })
})

app.listen(3000,()=>{
    console.log("服务器运行在3000端口上");
})

解决

3.前端解决：开发环境下跨域

• 在项目根目录下新增一个名为 vue.config.js的文件
• 在其输入下列代码

module.exports = {
    devServer: {
      proxy: {
        '/api': {
          target: 'http://localhost:3000/',
          changeOrigin: true,
          pathRewrite:{
              '^/api':""
          }
        }
      }
    }
  }

• 修改前端

<template>
  <div class="hello">
    
  </div>
</template>

<script>

import axios from "axios"

export default {
  name: 'HelloWorld',
  mounted(){
    axios.get("/api/list").then(res =>{
      console.log(res.data);
    })
  }
}
</script>

• 重启即可