扫二维码与项目经理沟通
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
这篇“如何处理vue上线跨域问题”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“如何处理vue上线跨域问题”文章吧。
为竞秀等地区用户提供了全套网页设计制作服务,及竞秀网站建设行业解决方案。主营业务为成都网站建设、做网站、竞秀网站设计,以传统方式定制建设网站,并提供域名空间备案等一条龙服务,秉承以专业、用心的态度为用户提供真诚的服务。我们深信只要达到每一位用户的要求,就会得到认可,从而选择与我们长期合作。这样,我们也可以走得更远!
什么是跨域
跨域是指在访问一个服务器上的资源时,使用的是跨域请求的方式。跨域请求有很多种,其中常见的有跨域访问资源、跨域写cookie、跨域调用接口等。在浏览器安全策略之下,跨域请求是默认禁止的,因为跨域请求可能带来安全风险。
解决Vue上线跨域问题
1.代理服务器
代理服务器是通过在前端请求后台接口时,将请求转发到接口所在的服务器上,在前端代码中使用代理服务器的地址作为请求路径,保证请求正常进行。利用代理服务器,前端能够实现对接口的请求转发,可以对后端接口的返回内容进行代理,修改返回内容,同时能够在请求前、请求后加一些修改性参数或处理逻辑。代理服务器大都是后端人员编写,前端项目调用即可。
代理服务器有很多种,例如Nginx、阿里云API网关、Apache等等。在Vue项目上线时,使用代理服务器将所有接口的访问路径指向同一个域名,例如将所有接口请求路径重定向到“/api”,使用“/api”作为请求路径。然后在代理服务器上定义一个转发规则,将以“/api”开头的请求转发到后端接口所在的服务器上就可以解决跨域问题。
在Vue项目中配置代理服务器:
//vue.config.js module.exports = { devServer: { proxy: { '/api': { target: 'http://localhost:8080', changeOrigin: true, //是否跨域 pathRewrite: { '^/api': '/' } }, } } }
2.jsonp
JSONP是JavaScript和跨域请求的一种解决方案。客户端通过动态创建标签,添加需要请求的URL(接口地址)以及回调函数作为参数,发送请求到服务器。服务器端接受请求后,返回一个JavaScript脚本,callback函数并携带需要的数据。最后客户端在回调函数中对返回的数据进行处理。JSONP是一种比较灵活的跨域解决方式,但是它只能支持GET请求,并且只能请求纯文本格式的数据。
在Vue项目中使用JSONP:
this.$jsonp('http://api.jisuapi.com/weather/query', { //jsonp函数可以使用axios+jsonp的方式实现 city: '上海', appkey: 'your appkey' }, (data) => { console.log(data) })
3.CORS
CORS(跨域资源共享)是跨域请求的一种官方解决方案,它可以让Web应用服务器进行跨域访问控制,从而使浏览器安全地完成跨域请求。使用CORS,只需要在后台的响应头信息中增加Access-Control-Allow-Origin字段,并设置为'*'或指定的域名即可,然后浏览器会根据响应头信息进行处理,从而达到解决跨域请求的问题。
在后台增加响应头信息:
//以Java Web服务为例,增加响应头信息 response.setHeader("Access-Control-Allow-Origin", "*");//允许跨域
WebSocket
WebSocket是一种全双工通信协议,在跨域请求中起到了很好的解决作用。WebSocket通过HTTP协议进行握手,创建连接后,数据可以在客户端和服务器之间进行双向传输。
在Vue项目中使用WebSocket:
var ws = new WebSocket('ws://localhost:8080'); ws.onopen = function() { ws.send('发送消息到服务器'); }; ws.onmessage = function(event) { console.log('从服务器接受到 ', event.data); }
以上就是关于“如何处理vue上线跨域问题”这篇文章的内容,相信大家都有了一定的了解,希望小编分享的内容对大家有帮助,若想了解更多相关的知识内容,请关注创新互联行业资讯频道。
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流