上线了做网站价格贵,wordpress主题mirana,注册公司流程时间,修改文案支持在线图片编辑之前写项目的时候总会遇到配置代理的问题#xff0c;可是配置了之后有时有用#xff0c;有时就没有用#xff0c;自己之前学的也是懵懵懂懂#xff0c;于是专门花了一个小时去了解了如何配置代理跨域#xff0c;然后在此记录一下#xff0c;方便自己以后查阅。 一、 常用… 之前写项目的时候总会遇到配置代理的问题可是配置了之后有时有用有时就没有用自己之前学的也是懵懵懂懂于是专门花了一个小时去了解了如何配置代理跨域然后在此记录一下方便自己以后查阅。 一、 常用发送 ajax 请求的方式
1、通过原生的 xhr(XMLHttpRequest) 发起 ajax 请求 ——比较麻烦真正开发中不常用
2、通过 jQuery 发起 ajax 请求 ——内部封装了XHR但是主要操作DOM不推荐使用
3、通过 axios 发起 ajax 请求——内部也封装了XHR并且体积小官方推荐使用
4、通过 fetch 发起请求——包裹两层 Promise并且在IE浏览器中兼容性比较差较少使用
由于官方推荐使用 axios并且体积小支持请求拦截器和响应拦截器所以本篇文章主要通过 axios来进行讲解如何配置代理解决跨域问题。 二、跨域问题的产生
当出现以下报错看到 CORS 和 Access-Control-Allow-Origin 这两个关键信息的时候就说明出现跨域问题了 一产生问题
所谓跨域就是违背了同源策略同源策略是一个著名的安全策略规定了协议名主机名端口号这三个要一致。下面用图来详细讲解一下刚刚的流程 这是刚刚发请求的过程根据上图可以看出来请求已经发出去了浏览器也已经把数据返回回来了可是为什么我们拿不到呢这是因为浏览器发现你跨域了所以它将数据握在了自己手里没有给我们。
二注意事项
这里有很多人以为产生跨域的时候连请求都没有发出去这样理解是错误的请求已经发出去了服务器也把数据返回回去了只不过浏览器没有给我们罢了这个一定要记住 三、如何解决跨域
1、CORS 解决跨域
cors 解决跨域不需要前端做任何事情只需要后端返回数据的时候加特殊的响应头即可。这里就不对 CORS 进行详细的讲解了如果有感兴趣的同学可以去看我这篇文章里面详细讲解了CORS的实现CORS如何实现跨域
2、jsonp 解决跨域
JSONP 解决跨域就是利用 script 标签的 src 属性可以加载跨域的 JavaScript 脚本这一特性实现的。与普通的 Ajax 请求不同在使用 JSONP 进行跨域请求时服务器不再返回 JSON 格式的数据而是返回一段调用某个函数的 JavaScript 代码在 src 属性中调用来实现跨域。这里我也不多赘述如果有感兴趣的同学可以看我这篇文章里面详细讲解了 jsonp 的实现jsonp 详解
3、代理服务器解决跨域本节重点
代理服务器解决跨域问题代理服务器与浏览器同源不存在跨域问题代理服务器与服务器非同源但是服务器与服务器之间采用 http 请求不存在跨域问题所以这样就非常巧妙的解决了跨域的问题。下面我用图来帮助大家理解一下这段话 四、具体实现代码
一如何开启代理服务器
1、nginx需要熟练后端学习成本大这里不使用
2、vue-cli利用脚手架代码简单方便上手这里主要讲解这个 二代码实现proxy
1、配置单个代理 // vue.config.js 文件中设置module.exports{devServer:{proxy:http://localhost:5000 }
}
优点配置简单
缺点1、不能配置多个代理 2、不能灵活控制到底走不走代理 2、配置多个代理 // vue.config.js 文件中设置
module.exports{devServer:{proxy:{/api01:{ target:http://localhost:5000,// 重写请求pathRewrite:{^/api01:}},/api02:{target:http://localhost:5001,// 重写请求pathRewrite:{^/api02:}}}}
}
优点可以灵活控制到底走不走代理
缺点配置略微有点繁琐
写在最后制作不易如果对你有用请留下一个免费的赞
