环境准备

首先我们要借助axios发送Ajax，axios安装命令：npm i axios

其次准备两台服务器，这里使用node.js+express搭建
server1

const express = require('express')
const app = express()app.use((request,response,next)=>{console.log('有人请求服务器1了');next()
})app.get('/students',(request,response)=>{const students = [{id:'001',name:'tom',age:18},{id:'002',name:'jerry',age:19},{id:'003',name:'tony',age:120},]response.send(students)
})app.listen(5000,(err)=>{if(!err) console.log('服务器1启动成功了,请求学生信息地址为：http://localhost:5000/students');
})

server2

const express = require('express')
const app = express()app.use((request,response,next)=>{console.log('有人请求服务器2了');next()
})app.get('/cars',(request,response)=>{const cars = [{id:'001',name:'奔驰',price:199},{id:'002',name:'马自达',price:109},{id:'003',name:'捷达',price:120},]response.send(cars)
})app.listen(5001,(err)=>{if(!err) console.log('服务器2启动成功了,请求汽车信息地址为：http://localhost:5001/cars');
})

vue的跨域问题

我们知道vue脚手架默认是在localhost：8080这个端口运行，而我们需要访问上面两台服务器，一般来说请求会被CORS策略阻止

  <div><button @click="getStudents">获取学生信息</button><button @click="getSCars">获取汽车信息</button></div>

 getStudents(){axios.get('http://localhost:5000/students').then(response => {console.log('请求成功',response.data)},error => {console.log('请求失败',error.message)},getSCars(){axios.get('http://localhost:5001/cars').then(response => {console.log('请求成功',response.data)},error => {console.log('请求失败',error.message)})})

使用node server1.js启动服务器server1
node server2.js启动服务器server2

浏览器正常访问
访问server1

访问server2

vue跨域访问，被CORS策略阻止

vue跨域问题解决方案

Ajax跨域问题有很多解决方案，在后端解决方案有设置响应头，jsonp等等，具体参考：AJAX跨域问题及解决方案

vue脚手架提供一种解决方案，那就是使用代理服务器代理发送请求

发送请求方：localhost:8080
那么代理服务器跟发送方保持一致：localhost:8080
接收请求方：localhost:5000
那么形成
发送请求  发送方8080--->代理方8080--转发-->接收方5000
响应  接收方5000--响应-->代理方8080--转发-->发送方8080
根本原因是因为代理服务器8080与服务器5000相互访问是使用http协议，这就类似与浏览器访问服务器5000一样

方式一

在vue.config.js中添加如下配置：

  devServer: {proxy: 'http://localhost:5000' //要跨域域名}

 getStudents(){/*axios.get('http://localhost:5000/students').then(*///方式一axios.get('http://localhost:8080/students').then(response => {console.log('请求成功',response.data)},error => {console.log('请求失败',error.message)})}

优缺点：

优点：配置简单，请求资源时直接发给前端（8080）即可。
缺点：不能配置多个代理，不能灵活的控制请求是否走代理。

局限性：
若按照上述配置代理，当请求了前端不存在的资源时，那么该请求会转发给服务器（优先匹配前端资源）
例如我在public创建与路径students相同名称的文件夹

那么再次请求学生资源时就会优先匹配文件students的内容

方式二

编写vue.config.js配置具体代理规则：

devServer: {proxy: {'/api1': {target: 'http://localhost:5000',//ws: true,//用于支持websocket//changeOrigin: true //用于控制请求头的host值，默认为true，表示请求头host值为要访问服务器的值（我就是你），当为false时，表示请求头host值为要代理服务器本身的值（我就是我）pathRewrite: {'^/api1': ''}//重写请求，用正则表达式匹配},'/api2': {target: 'http://localhost:5001',pathRewrite: {'^/api2': ''}}}}

    getStudents(){/*axios.get('http://localhost:5000/students').then(*///方式一/*axios.get('http://localhost:8080/students').then(*///方式二axios.get('http://localhost:8080/api1/students').then(response => {console.log('请求成功',response.data)},error => {console.log('请求失败',error.message)})},getSCars(){axios.get('http://localhost:8080/api2/cars').then(response => {console.log('请求成功',response.data)},error => {console.log('请求失败',error.message)})}

优缺点：

优点：可以配置多个代理，且可以灵活的控制请求是否走代理。
缺点：配置略微繁琐，请求资源时必须加前缀。

（三十六）Vue解决Ajax跨域问题相关推荐

什么是ajax跨域问题,如何解决ajax跨域问题
<如何解决ajax跨域问题>由会员分享,可在线阅读,更多相关<如何解决ajax跨域问题(5页珍藏版)>请在人人文库网上搜索. 1.如何解决ajax跨域问题由于此前很少写前端的 ...
【Vue】Vue全家桶（三）Vue组件通信+Vue组件插槽+动画与过渡+使用vue-cli解决Ajax跨域问题
1 Vue组件通信 1.1 组件间通信基本原则不要在子组件中直接修改父组件的状态数据数据在哪, 更新数据的行为(函数)就应该定义在哪 1.2 vue 组件间通信方式 props vue 的自定义事 ...
Vue学习笔记05 组件的自定义事件-组件通信-$nextTick-脚手架解决ajax跨域-插槽-过渡动画
文章目录 Vue学习笔记05 父组件给子组件传值注意点子组件给父组件传值父组件接受子组件的传值通过函数组件的自定义事件事件绑定的第一种写法 @或v-on 事件绑定的第二种写法:使用ref ...
php json -gt;访问,【转】Php+ajax+jsonp解决ajax跨域问题
首先:jsonp是json用来跨域的一个东西. 原理是通过script标签的跨域特性来绕过同源策略. 发送端: $.ajax({ type : "post", url : &quo ...
如何解决ajax跨域java,ajax跨域问题，从java角度解决
前言今天给小伙伴开放一个接口方便调试数据,但是老是出现CROS策略阻塞,查询资料后知道了是ajax跨域引起的,以此记录此次解决问题的过程. 什么是ajax跨域 ajax跨域的原理 ajax出现请求跨 ...
用iframe设置代理解决ajax跨域请求问题
用iframe设置代理解决ajax跨域请求问题参考文章: (1)用iframe设置代理解决ajax跨域请求问题 (2)https://www.cnblogs.com/ranzige/p/370965 ...
解决AJAX跨域WCF的问题详解
解决AJAX跨域WCF的问题详解参考文章: (1)解决AJAX跨域WCF的问题详解 (2)https://www.cnblogs.com/jooucks/p/7159147.html 备忘一下.
使用SpringMVC解决Ajax跨域问题
使用SpringMVC解决Ajax跨域问题参考文章: (1)使用SpringMVC解决Ajax跨域问题 (2)https://www.cnblogs.com/mengyao/p/6294787.ht ...
jsonp解决ajax跨域问题,用JSONP解决ajax跨域问题
JSONP:JSON With Padding 要点: 1.script标签 2.用script标签加载资源是没有跨域问题的概要: 在资源加载进来之前先定义一个函数,这个函数接受一个参数(数据),函 ...

（三十六）Vue解决Ajax跨域问题

文章目录

环境准备

vue的跨域问题

vue跨域问题解决方案

方式一

方式二

（三十六）Vue解决Ajax跨域问题相关推荐

最新文章

热门文章