axios和跨域解决
- axios 写法
axios.get("xxx地址").then(
(response) => {
console.log();
},
(error) => {
console.log(error);
}
);
- 跨域问题解决
cors 方法: 后端设置 对应得响应头 就能请求到,缺陷:任何人都可以请求到。有安全问题。
jsonp 方法: 原理 script 标签 src 属性引入 外部 资源 不受同源策略 限制,缺陷:前端 后端 都要改,而且 只能请求 get
配置代理服务器 因为,前端请求才有 跨域,服务器和服务器没有跨域,代理服务器 和 前端 没有同源策略 限制。
vue脚手架提供 1.nginx 代理
示例 2. vue-cli 配置 (简单,易学)
vue.config.js文件
module.exports = defineConfig({
transpileDependencies: true,
lintOnSave: false, // 关闭语法检查
//开启代理 (方式一)
devServer: {
//这会告诉开发服务器将任何未知请求 (没有匹配到静态文件的请求) 代理到http://localhost:4000。
//缺点:不能配置多个,而且,先会找本地,如果本地没有才去找 目标地址要
proxy: 'http://localhost:4000'
},
// ***(方式二)
devServer: {
proxy: {
// axios处写法 http://localhost:8080/api/student 紧跟端口号后面
'/api': { //请求前缀 请求的前缀有没有这个/api 如果有 走请求,没有不走
target: 'http://localhost:5000', //转发的目标 地址
pathRewrite: {
'^/api': ''
}, //去掉目标服务器请求的前缀,重写路径 。必写!
ws: true, //websocket 支持 默认为true
changeOrigin: true //代理服务器 说谎 骗目标 服务器 说我们两 是同源的 。默认为true
},
'/foo': {
target: '<other_url>'
}
}
}
})
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· DeepSeek “源神”启动!「GitHub 热点速览」
· 我与微信审核的“相爱相杀”看个人小程序副业
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库
· 上周热点回顾(2.17-2.23)