vue中代理解决跨域

跨域是什么

简单的讲就是你在一个地方使用另一个地方的资源，被浏览器给挡下来了，不让不用！当然，它挡下来是有自己理由的：为了安全(╬▔皿▔)╯。

解决跨域

我是用vue开发的，就vue代理模式解决跨域说明一下。
1、在vue.config.js中这样写：

let devProxy = {  //获取ip信息  '/getIpMsg': {    target: "https://whois.pconline.com.cn/ipJson.jsp",//真实地址    ws: true,    changeOrigin: true,    pathRewrite: {      '/getIpMsg': ''    },  },};const { defineConfig } = require('@vue/cli-service')module.exports = defineConfig({  transpileDependencies: true,  publicPath: process.env.NODE_ENV === "production" ? "./" : "/",  devServer: {    port: 8080,//端口    open: false,//项目启动后是否在浏览器自动打开    proxy: devProxy//代理服务器  },})

target就是自己需要代理的真实地址getIpMsg你是可以自定义的。
2、创建一个http.ts（我是ts的，你也可以js）:

import axios from "axios";//创建请求function createServe(config: any) {    let serve = axios.create({        timeout: 5000 //超时    });    //请求拦截器    serve.interceptors.request.use(        config => {            return config;        },        error => {            return Promise.reject(error)        }    )    //响应拦截器    serve.interceptors.response.use(        response => {            return response;        },        error => {            return Promise.reject(error)        }    )    return serve(config);}export default createServe;

3、创建一个request.ts:

import createServe from "./http"//获取ip信息export function getIpMsg(params = {}) {    return createServe({        method: "GET",        url: '/getIpMsg',        params    })}

4、这样使用：

import { getIpMsg } from "@/api/request";function test(){getIpMsg().then(res => {console.log(res);})}

原创者：曦12原文链接：https://www.cnblogs.com/xi12/p/16690090.html转载请注明原创者添加原文链接！