axios和跨域解决

  1. axios 写法
 axios.get("xxx地址").then(												
(response) => {												
console.log();												
},												
(error) => {												
console.log(error);												
}												
);
  1. 跨域问题解决
    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>'									
	}									
  }									
 }									
})			
posted @   中亿丰数字科技  阅读(84)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· DeepSeek “源神”启动!「GitHub 热点速览」
· 我与微信审核的“相爱相杀”看个人小程序副业
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库
· 上周热点回顾(2.17-2.23)
点击右上角即可分享
微信分享提示