vue跨域请求
首先在vue脚手架下创建vue.config.js文件插入代码// 进行修改默认的webpack配置module.exports = {devServer: {//开发环境的服务器配置// 是否自动弹出浏览器,默认falseopen: false,// 修改默认端口,默认8080// port: 9090,proxy: {//进行代理转发'/api': {
首先在vue脚手架下创建vue.config.js文件插入代码
// 进行修改默认的webpack配置
module.exports = {
devServer: { //开发环境的服务器配置
// 是否自动弹出浏览器,默认false
open: false,
// 修改默认端口,默认8080
// port: 9090,
proxy: { //进行代理转发
'/api': {
// 转发的网址
target: "http://m.sirfang.com/api",
// 是否开启本地代理 默认true
changeOrigin: true,
// 重要点
pathRewrite: {
'^/api': ''
}
}
}
}
}
什么是跨域
理解跨域的概念:协议、域名、端口都相同才同域,否则都是跨域
跨域就是指浏览器不允许当前页面的所在源,去请求另一个源的数据
在vue 中主要是通过vue 脚手架中的vue.config.js 文件来配置的,通过在devServer中的proxy来配置跨域的前缀
跨域的报错提示
只要是看到这个报错就是跨域,跨域就是指浏览器不允许当前页面的所在源,去请求另一个源的数据被称为跨域
jquery中jsonp也可以解决跨域
Jsonp是解决跨域的一种解决方案,实现原理主要是利用动态创建 script 标签,设置src属性,页面要提前定义好callback。后端会返回回调函数执行,并包裹参数callback(data)callback 中的参数就是 json
什么是jsonp,jsonp的原理
ajax 请求受同源策略影响,不允许进行请求,我们利用 script 标签的 src 属性不受同源策略的约束,利用这个特性jsonp需要以下步骤:
1.动态创建<script></script>(document.createElement('script'))
2.设置src 属性,(src中要包含参数callback=fn)进行跨域请求
3.将 <script></script>添加到页面中执行 (body.appendChild('script'))
4.页面要提前定义好callback。
5.后端会返回回调函数执行并包裹参数callback(data)
备注:服务端不再返回JSON格式的数据,而是返回回调函数包裹数据(fn({name:'tom',age:18}),在src中进行了调用,这样实现了跨域。
解决跨域的方法不止这两种,还有其他方法
cors是一种跨域解决方案,它使用额外的 HTTP 头来告诉浏览器让运行在一个origin 上的Web应用被准许访问来自不同源服务器上的指定的资源。当一个资源从与该资源本身所在的服务器不同的域、协议或端口请求一个资源时,资源会发起一个跨域 HTTP 请求。
更多推荐
所有评论(0)