当前位置:首页>开发>正文

vue-cli与后台给的接口有跨域.跨域怎么配置 vue-resource怎么发起跨域请求

2023-04-13 01:40:51 互联网 未知 开发

 vue-cli与后台给的接口有跨域.跨域怎么配置 vue-resource怎么发起跨域请求

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-resource怎么发起跨域请求

vue 与 vue-resource 跨域问题解决 方法一: 在vue项目下的 config/index.js 文件里面配置代理proxyTable: var path = require(path) module.exports = { build: { env: require(./prod.env), index: path.resolve(__dirname, ../dist/inde...

最新文章