目录跨域是什么解决跨域1、在Vue.config.js中这样写:2、创建一个Http.ts(我是ts的,你也可以js):3、创建一个request.ts:4、这样使用:跨域是什么 简
简单的讲就是你在一个地方使用另一个地方的资源,被浏览器给挡下来了,不让不用!当然,它挡下来是有自己理由的:为了安全(╬▔皿▔)╯。
我是用vue开发的,就vue代理模式解决跨域说明一下。
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你是可以自定义的。
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;
import createServe from "./http"
//获取ip信息
export function getIpMsg(params = {}) {
return createServe({
method: "GET",
url: '/getIpMsg',
params
})
}
import { getIpMsg } from "@/api/request";
function test(){
getIpMsg()
.then(res => {
console.log(res);
})
}
到此这篇关于vue代理模式解决跨域详解的文章就介绍到这了,更多相关vue代理模式解决跨域内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!
--结束END--
本文标题: vue代理模式解决跨域详解
本文链接: https://www.lsjlt.com/news/167455.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑,方便收藏和打印~
2024-01-12
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
0