前言前端
上一篇总结了前端对 axios 的理解和常见的项目中的封装使用方法,这期记录一下 electron-vue 项目中开发环境下解决 http 、https请求跨域的问题。vue
正文ios
1.为何有跨域的存在?web
先后端分离的一种开发模式下,在前端客户端向服务端发送 ajax 请求的时候受到同源策略的限制,由于 ajax是基于http 协议的异步 JavaScript 和 XML,是一种用于先后端数据交互的技术,从而实现网页异步更新,而 http 又受到同源策略的限制。所以产生了跨域的问题。ajax
同源策略实质指 "协议+域名+端口号"三者相同,三者缺一不可。axios
固然也存在一些不受同源策略限制的状况,以下:后端
(1)script 标签容许跨域嵌入脚本,所以不受跨域限制。api
(2)img 、link 标签、@font-face 不受跨域影响。跨域
(3)video 和 audio 嵌入的资源不受跨域影响。服务器
(4)iframe 载入的任何资源不受跨域限制。
(5)object 、embed 和 applet 插件不受同源限制。
(6) websocket 协议通讯不受同源限制,只要服务器支持就能够实现跨域通讯。
2.常见的跨域解决方法总结?
(1)基于 JSONP 技术实现跨域。
(2)CORS--跨域资源共享。
(3)使用代理服务器转发请求。
3.electron-vue 项目开发环境如何解决跨域?
上一篇在项目中封装 axios 的时候设置了baseUrl,要解决开发环境中跨域问题,只须要对该 url 在devServer 中设置服务代理便可。
在electron-vue 项目中须要找到dev-runner.js文件。
在该文件中找到 WebpackDevServer,里面添加服务代理,代码以下:
const server = new WebpackDevServer(compiler, { contentBase: path.join(__dirname, "../"), quiet: true, proxy: { "/api": { // 请求的目标服务器地址 target: "http://xxx.xxxxxx/", // 若是是https接口,须要配置这个参数 secure: false, // 设置容许跨域 changeOrigin: true, // 重写路径 pathRewrite: { "^/api": "", }, headers: { referer: "", }, }, }, before(app, ctx) { app.use(hotMiddleware); ctx.middleware.waitUntilValid(() => { resolve(); }); }, });
这样就实现了前端经过服务代理解决跨域的问题,在页面就能够正常请求到服务端数据。
总结
以上就是本文的所有内容,但愿给读者带来些许的帮助和进步,方便的话点个关注,小白的成长踩坑之路会持续更新一些工做中常见的问题和技术点。