vue简单的使用代理模式解决跨域问题

目的:使用axios请求 http://study.yuanjin.tech/api/user/login 接口获取数据

项目根目录下添加代理服务器配置vue.config.js

module.exports = {
  //vue的配置
  devServer: {
    proxy: {
      "/api": {
          //开发时,开发服务器需要代理到 http://stydy.yuanjin.tech
        target: "http://study.yuanjin.tech",
      },
    },
  },
};

先写一个用于请求数据的js文件:用户post请求登录接口,需要带用户参数信息

import axios from "axios";
export async function login(loginInfo) {
  //http://study.yuanjin.tech/api/user/login
  var resp = axios.post("/api/user/login", loginInfo);
  return resp;
}

main.js中调用js文件

import {login} from "@/services/userService";

async function test(){
var resp = await login({
  loginId: "user",
  loginPwd: "123123"
});
console.log(resp);
}

test();

重点:配置好之后要重启服务

猜你喜欢

转载自blog.csdn.net/qq_42910468/article/details/108132706