vue解决跨域问题(推荐)

一.什么是跨域

　　跨域问题的出现是因为浏览器的同源策略问题，所谓同源:就是两个页面具有相同的协议（protocol），主机（host）和端口号（port），它是浏览器最核心也是最基本的功能，如果没有同源策略我们的浏览器将会十分的不安全，随时都可能受到攻击。

当我们请求一个接口的时候，出现如：Access-Control-Allow-Origin 字眼的时候说明请求跨域了

二.如何解决跨域问题

　　1.使用jsonp实现，网页通过script标签向服务器请求json数据，服务器受到请求后，将数据放在一个指定名字的回调函数的参数里面传给前端。

<script src="http://www.test.com/getData?callback=getData"></script>
// 向服务器test.com发出请求，该请求的查询字符串有一个callback参数，用来指定回调函数的名字

// 处理服务器返回回调函数的数据
<script type="text/javascript">
  // 服务器返回的数据会放到回调函数里面
  function getData(res){
    // 处理获得的数据
    console.log(res.data)
  }
</script>

　　2.使用Jquery ajax实现，

$.ajax({
 url: 'http://www.test.com:8888/getData',
 type: 'get',
 dataType: 'jsonp', // 请求方式为jsonp
 jsonpCallback: "handleCallback",  // 自定义回调函数名
 data: {}
})

　　3.在vue开发中实现跨域：在vue项目根目录下找到vue.config.js文件（如果没有该文件则自己创建），在proxy中设置跨域

 devServer: {
  proxy: { //配置跨域
   '/api': {
    target: 'http://121.121.67.254:8185/', //这里后台的地址模拟的;应该填写你们真实的后台接口
    changOrigin: true, //允许跨域
    pathRewrite: {
     /* 重写路径，当我们在浏览器中看到请求的地址为：http://localhost:8080/api/core/getData/userInfo 时
      实际上访问的地址是：http://121.121.67.254:8185/core/getData/userInfo,因为重写了 /api
      */
     '^/api': ''
    }
   },
  }
 },

　　在vue中使用proxy进行跨域的原理是：将域名发送给本地的服务器（启动vue项目的服务,loclahost:8080），再由本地的服务器去请求真正的服务器。

　　以下是我在开发vue项目中实现跨域的步骤：

　　1.在proxy中设置要访问的地址，并重写/api为空的字符串，因为我们真正请求的地址是没有带/api，这个重写很重要!!!

　　

　　2.在创建axios实例的时候将baseURL设置为/api ,这时候我们的跨域就已经完成了。

　　

　　3. 假如请求的真正地址为：http://121.121.67.254:8185/core/getdata/userInfo,但我们在浏览器上会看到是这样的： http://localhost:8080/api/core/getData/userInfo ,多了个/api，但并不影响我们请求数据。

　　

到此这篇关于vue解决跨域问题(推荐)的文章就介绍到这了,更多相关vue解决跨域内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • Vue中跨域及打包部署到nginx跨域设置方法

    众所周知,我们在做前后端分离项目的时候,经常需要在本地起前端工程,接口希望拉取服务端的实际数据而不是本地的mock数据,而如果本地程序直接访问远程接口, 肯定会遇到跨域问题. 什么是跨域?实现跨域的多种方式? 这里我就不详细介绍了,大家自行百度哈 为什么要实现前端跨域 一般来讲,前后端分离的项目在大公司都会由后台设置允许跨域访问,因为后台设置允许跨域是很简单和方便的,但是某些情况下,一些小公司或者你工作的场所后台不怎么配合的情况下,这就需要前端来配置跨域请求来方便我们使用接口 vue项目中的配置

  • vue-cli3配置与跨域处理方法

    安装 vue-cli3 环境准备 1. 如果您已安装 vue-cli2 ,请先删除当前脚手架,否则无法成功安装 vue-cli3 . npm uninstall vue-cli -g 2. 检查 node.js 版本. vue-cli3 需要 node 版本大于8.9.在cmd中输入 node -v 查看版本.如果版本过低,请先去 node官网 中下载高版本. 安装脚手架 vue-cli3的包名有 vue-cli 改为 @vue/cli . 使用npm全局安装vue-cli3. npm inst

  • vue-socket.io跨域问题有效解决方法

    网友问题: 使用了vue-cli这个脚手架工具.在开发环境中如何配置跨域这个我懂.但是使用npm run build后,里面所有的ajax的跨域请求url都变成了根目录. 这样该如何解决部署的跨域问题? 报错信息: Access to XMLHttpRequest at 'http://192.168.37.130:5050/socket.io/?EIO=3&transport=polling&t=N0oqNsW' from origin 'http://localhost:8080' h

  • vue使用代理解决请求跨域问题详解

    在日常开发中,我们前端必不可少的需要像后端请求数据. 但是一般前后端分离,所以域名.端口等肯定不尽相同,这样就不可避免的会遇到浏览器的同源策略限制. 在一般情况下,后端都会设置请求跨域允许的来源.方法等. 但是也保不准后端疏忽而忘记这个问题. 那为了不影响我们的开发,前端只能被动的去找后端解决跨域问题. 其实,我们前端也可以解决跨域问题,那就是使用代理. 举个例子: 我请求的地址是这个:http://192.168.12.36:9000/api/SourceManager 但是我本地的vue项目

  • Vue动态加载图片在跨域时无法显示的问题及解决方法

    写在前面 小记,就简单写了 .问题:VUE开发时因为要访问后端的接口所以要配置请求转发,如果直接转发全部请求,那么VUE动态绑定的src也会转发到后端,因为图片在前端,所以会收到404 NOT FOUND的报错. 常规的请求转发 在vue-cli3内,直接编辑vue.config.js,如下: let proxyObj={}; proxyObj['/']={ ws:false, target:'http://localhost:8023',//后端地址 changeOrigin:true, pa

  • 解决前后端分离 vue+springboot 跨域 session+cookie失效问题

    环境: 前端 vue ip地址:192.168.1.205 后端 springboot2.0 ip地址:192.168.1.217 主要开发后端. 问题: 首先登陆成功时将用户存在session中,后续请求在将用户从session中取出检查.后续请求取出的用户都为null. 解决过程: 首先发现sessionID不一致,导致每一次都是新的会话,当然不可能存在用户了.然后发现cookie浏览器不能自动保存,服务器响应set-cookie了 搜索问题,发现跨域,服务器响应的setCookie浏览器无

  • vue解决跨域问题(推荐)

    一.什么是跨域 跨域问题的出现是因为浏览器的同源策略问题,所谓同源:就是两个页面具有相同的协议(protocol),主机(host)和端口号(port),它是浏览器最核心也是最基本的功能,如果没有同源策略我们的浏览器将会十分的不安全,随时都可能受到攻击. 当我们请求一个接口的时候,出现如:Access-Control-Allow-Origin 字眼的时候说明请求跨域了 二.如何解决跨域问题 1.使用jsonp实现,网页通过script标签向服务器请求json数据,服务器受到请求后,将数据放在一个

  • vue解决跨域路由冲突问题思路解析

    vue 简介 Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的渐进式框架. Vue 只关注视图层, 采用自底向上增量开发的设计. Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件. Vue 学习起来非常简单,本教程基于 Vue 2.1.8 版本测试. 当我们在路由里面配置成以下代理可以解决跨域问题 proxyTable: { '/goods/*': { target: 'http://localhost:3000' }, '/users/*

  • vue.js使用代理和使用Nginx来解决跨域的问题

    vue.js使用代理和使用Nginx来解决跨域的问题

    使用Nginx 反向代理解决跨域问题(vue.js使用代理去掉vue.js因为跨域而触发的options请求) 我们的项目还是需要node.js作为容器的 一.Windows 下安装Nginx (官网下载稳定版http://nginx.org/en/download.html) 二.修改config里的nginx.conf文件的server server { listen 8899;// 你的端口 server_name localhost; root C:/ZOBSF_F/dist;//你打包

  • Vue如何解决跨域问题详解

    Vue如何解决跨域问题详解

    什么是跨域 跨域指浏览器不允许当前页面的所在的源去请求另一个源的数据.源指协议,端口,域名.只要这个3个中有一个不同就是跨域. 这里列举一个经典的列子: #协议跨域http://a.baidu.com访问https://a.baidu.com:#端口跨域http://a.baidu.com:8080访问http://a.baidu.com:80:#域名跨域http://a.baidu.com访问http://b.baidu.com: 通常在不同服务器访问过程中可能会遇到跨域问题,也就是口头上常说

  • VUE跨域详解以及常用解决跨域的方法

    VUE跨域详解以及常用解决跨域的方法

    目录 跨域 解决跨域常用方法: 一.VUE中常用proxy来解决跨域问题 二.JSONP解决跨域 三.CORS是跨域资源共享(Cross-Origin Resource Sharing),以 ajax 跨域请求资源,支持现代浏览器,IE支持10以上 四.iframe实现跨域 总结 跨域 当我们遇到请求后台接口遇到 Access-Control-Allow-Origin 时,那说明跨域了. 跨域是因为浏览器的同源策略所导致,同源策略(Same origin policy)是一种约定,它是浏览器最核

  • vue项目中常用解决跨域的方法总结(CORS和Proxy)

    目录 一.什么是跨域? 二.如何解决跨域? 总结 一.什么是跨域? 跨域问题的出现是因为浏览器的同源策略问题.所谓同源就是必须有以下三个相同点:协议相同.主机相同.端口相同.如果其中有一项不同,即出现非同源请求,就会产生跨域.当我们请求一个接口的时候,出现如:Access-Control-Allow-Origin 字眼的时候说明请求跨域了 二.如何解决跨域? 跨域的解决方案: jsonpcorsNode中间件代理(两次跨域) 即 Proxynginx反向代理 CORS支持所有类型的HTTP请求,

  • vue打包使用Nginx代理解决跨域问题

    vue 在开发环境,涉及跨域,就在本地配置了代理,但是部署到服务器上,就不行了. 解决方法有一下几种 服务器端配置CORS 用nginx反向代理,和访问本地服务器是一样的 可以修改成正式线上的地址,再build 推荐 使用nginx配置反向代理,这样就可以在前端彻底解决跨域问题. vue index.js文件源码 'use strict' // Template version: 1.2.7 // see http://vuejs-templates.github.io/webpack for

  • 解决vue axios跨域 Request Method: OPTIONS问题(预检请求)

    我们在vue开发中用axios进行跨域请求时有时会遇到,同一个接口请求了两次,并且第一次都是options请求,然后才是post/get请求 如下图 options请求 get请求 为什么会出现这种原因呢? 这是因为CORS跨域分为 简单跨域请求和复杂跨域请求: 简单跨域不会发送options请求,复杂跨域会发送一个预检请求options. 1.简单跨域满足的条件 1.请求方式是以下三种之一: HEAD GET POST 2.HTTP的头信息不超出以下几种字段 Accept Accept-Lan

  • vue+Java后端进行调试时解决跨域问题的方式

    vue+Java后端进行调试时解决跨域问题的方式

    今天在开发过程中遇到一个问题,拿到了一套vue代码,计划对这套代码的部分样式进行调整,Java后端代码已经写好并且部署到了线上.这时命令行运行vue项目时访问会受限,取不下数据来,遇到了跨域访问失败的问题,这时可以怎么做呢? 首先,要了解什么叫跨域访问? 跨域,指的是浏览器不能执行其他网站的脚本.它是由浏览器的同源策略造成的,是浏览器对javascript施加的安全限制. 所谓同源是指,域名,协议,端口均相同,举个例子: http://www.123.com/index.html 调用 http

  • vue中axios解决跨域问题和拦截器的使用方法

    vue中axios不支持vue.use()方式声明使用. 所以有两种方法可以解决这点: 第一种: 在main.js中引入axios,然后将其设置为vue原型链上的属性,这样在组件中就可以直接 this.axios使用了 import axios from 'axios'; Vue.prototype.axios=axios; components: this.axios({ url:"a.xxx", method:'post', data:{ id:3, name:'jack' } }

随机推荐