跨域是什么
简单的讲就是你在一个地方使用另一个地方的资源，被浏览器给挡下来了，不让不用！当然，它挡下来是有自己理由的：为了安全(╬▔皿▔)╯。
解决跨域
我是用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);
})
}到此这篇关于vue代理模式解决跨域详解的文章就介绍到这了,更多相关vue代理模式解决跨域内容请搜索Devmax以前的文章或继续浏览下面的相关文章希望大家以后多多支持Devmax！