当前位置:首页>旅游>正文

vue-cli与后台给的接口有跨域.跨域怎么配置 vue为啥会访问两次后端接口呢

2023-04-14 20:05:00 互联网 未知 旅游

 vue-cli与后台给的接口有跨域.跨域怎么配置 vue为啥会访问两次后端接口呢

vue-cli与后台给的接口有跨域.跨域怎么配置

跨域问题来源于JavaScript的同源策略,即只有协议 主机名 端口号(如存在)相同,则允许相互访问。也就是说JavaScript只能访问和操作自己域下的资源,不能访问和操作其他域下的资源。在以前,前端和后端混杂在一起,比如JavaScript直接调用同系统里面的一个Httphandler,就不存在跨域的问题,但是随着现代的这种多种客户端的流行,比如一个应用通常会有Web端,App端,以及WebApp端,各种客户端通常会使用同一套的后台处理逻辑,即API,前后端分离的开发策略流行起来,前端只关注展现,通常使用JavaScript,后端处理逻辑和数据通常使用WebService来提供json数据。一般的前端页面和后端的WebServiceAPI通常部署在不同的服务器或者域名上。这样,通过ajax请求WebService的时候,就会出现同源策略的问题。需要说明的是,同源策略是JavaScript里面的限制,其他的编程语言,比如在C#,Java或者iOS等其他语言中是可以调用外部的WebService,也就是说,如果开发Native应用,是不存在这个问题的,但是如果开发Web或者Html5如WebApp,通常使用JavaScriptajax对WebService发起请求然后解析返回的值,这样就可能存在跨域的问题。一般的,很容易想到,将外部的资源搬到同一个域上就能解决同源策略的限制的。即在Web网站上同时开发一个Http服务端页面,所有JavaScript的请求都发到这个页面上来,这个页面在内部使用其他语言去调用外部的WebService。即添加一个代理层。这种方式可以解决问题,但是不够直接和高效。目前,比较常见的跨域解决方案包括JSONP(JSONwithpadding)和CORS(Cross-originresourcesharing)。一些解决方案需要客户端和服务端配合如JSOP,一些则只需要服务端配合处理比如CORS。下面分别介绍这两种跨域方案,以及服务端WebService如何支持这两种跨域方案。JSONP以及WebService的支持同源策略下,某个服务器是无法获取到服务器以外的数据,但是html里面的img,iframe和script等标签是个例外,这些标签可以通过src属性请求到其他服务器上的数据。而JSONP就是通过script节点src调用跨域的请求。vue-cli与后台给的接口有跨域.跨域怎么配置

vue为啥会访问两次后端接口呢

使用vue.js与后台实现数据交互的方法是利用vue-resource组件提供的一系列api:
get(url, [data], [success], [options])
post(url, [data], [success], [options])
put(url, [data], [success], [options])
patch(url, [data], [success], [options])
delete(url, [data], [success], [options])
jsonp(url, [data], [success], [options])

具体举例如下:
1、导入vue-resource

2、基于全局Vue对象使用http
// 通过someUrl获取后台数据,成功后执行then的代码
Vue.http.get(/someUrl, [options]).then(successCallback, errorCallback)
3、在一个Vue实例内使用$http
// $http是在vue的局部范围内的实例
this.$http.get(/someUrl, [options]).then(successCallback, errorCallback)
说明:
在发送请求后,使用then方法来处理响应结果,then方法有两个参数,第一个参数是响应成功时的回调函数,第二个参数是响应失败时的回调函数。

vue.js 本地 怎么做服务器渲染

从官方给出的渲染方案能看出,后端只是在页面硬塞了数据及数据状态进去,就效果而论渲染的工作还是前端负责,所以其他后端也能做到。具体看例子写script标签到页面那段.
vue的服务端渲染,目前发现下面两个包可以实现nodejs向其他服务器请求数据。我现在用的是axios,因为我看到axios同时支持nodejs和浏览器。