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);
})
}
转载请标注来源与原作者