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); 	}) }