Vue如何解决跨域问题详解

2024-10-22 09:35:16

什么是跨域

跨域指浏览器不允许当前页面的所在的源去请求另一个源的数据。源指协议，端口，域名。只要这个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；

通常在不同服务器访问过程中可能会遇到跨域问题，也就是口头上常说的策略同源问题 CORS

出现跨越一般就是判断三个地方，http协议，请求地址，端口号，三者若有一处不相同，那么就会出现跨域，解决这个问题就要配置一个代理服务器，通过代理服务器实现跨域请求

解决跨域的情况一般就是如下图：

Vue 中配置跨域的配置在 vue.config.js 文件中添加:

配置一个的写法

module.exports = {
  devServer: {
    proxy: 'http://localhost:5000' // 配置访问的服务器地址
  }
}

配置多个的写法

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:5000', // 配置访问的服务器地址
        pathRewrite: { '^/api': '' },  // 用于将请求中的 /api 字符串替换为空, 然后访问地址就能正确访问，若不添加此行配置，那么访问地址就变成了： http://localhost:5000/api/request_url，这样的请求就会出现 404 操作
        ws: true, // 是否支持 webstocket, 默认是 true
        changeOrigin: true // 用于控制请求头中的 host 值, 默认是 ture
      },
      '/api2': {
        target: 'http://localhost:6000', // 配置访问的服务器地址
        pathRewrite: { '^/api2': '' },  // 用于将请求中的 /api2 字符串替换为空, 然后访问地址就能正确访问，若不添加此行配置，那么访问地址就变成了： http://localhost:6000/api/request_url，这样的请求就会出现 404 操作
        ws: true, // 是否支持 webstocket, 默认是 true
        changeOrigin: true // 用于控制请求头中的 host 值, 默认是 ture
      }
    }
  }
}

添加完代理服务器的相关配置，就需要通过 ajax 请求访问服务器了，一般 vue 中使用的都是 axios 库，这里就以 axios 库为例子：

安装 axios

npm i axios

使用 axios

// 引入 axios 库
import axios from 'axios'
export default {
	name: 'Student', // 组件名称
	// 组件使用的方法
	methods: {
		注释内容 `:get 请求访问 /api 前缀开头的地址，实际上访问的地址是： http://localhost:5000/request_url`
		test1() {
			axios.get('http://localhost:8080/api/request_url').then(res => {
				console.log(res.data); // 输出请求响应值内容
			});
		},
		注释内容 :`get 请求访问 /api2 前端开头的地址，实际上访问的地址是：http://localhost:6000/request_url`
		test2() {
			axios.get('http://localhost:8080/api2/request_url').then(res => {
				console.log(res.data); // 输出请求响应值内容
			})
		}
	}
}

总结

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

详解Vue-cli代理解决跨域问题

使用vue-cli调接口的时候,总是会出现垮与问题,因为vue的localhost与访问域名不一致导致.而这一点,开发者显然也想到了,故而在vuejs-templates,也就是vue-cli的使用的模板插件里,有关于API proxy的说明,这个配置就是将localhost映射成访问的域名. 那么何为代理? 代理服务器英文全称是Proxy Server,其功能就是代理网络用户去取得网络信息.形象的说:它是网络信息的中转站.可以简单粗暴理解为把你的域名转换成你访问的域名,(我这么记的,当然可能并
vue使用代理解决请求跨域问题详解

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

一.安装vue-resource插件 cnpm install vue-resource --save 在根目录下的package.json检查一下插件的版本在rourer-index.js下引入文件 import Resource from 'vue-resource' Vue.use(Resource) 引入vue-resource后,可以基于全局的Vue对象使用http,也可以基于某个Vue实例使用http 参考链接二.安装axios插件 cnpm install --save axi
Vue开发中遇到的跨域问题及解决方法

跨域是指a页面想获取b页面资源,如果a.b页面的协议.域名.端口.子域名不同,或是a页面为ip地址,b页面为域名地址,所进行的访问行动都是跨域的,而浏览器为了安全问题一般都限制了跨域访问,也就是不允许跨域请求资源. 1.jsonp 原理是:动态插入script标签,通过script标签引入一个js文件,这个js文件载入成功后会执行我们在url参数中指定的函数,并且会把我们需要的json数据作为参数传入. 由于同源策略的限制,XmlHttpRequest只允许请求当前源(域名.协议.端口)的资源,
Vue项目中跨域问题解决方案

方法后台更改header 使用http-proxy-middleware 代理解决(项目使用vue-cli脚手架搭建) Jquery jsonp 后台更改header header('Access-Control-Allow-Origin:*');//允许所有来源访问 header('Access-Control-Allow-Method:POST,GET');//允许访问的方式使用http-proxy-middleware 代理解决(项目使用vue-cli脚手架搭建) 打开config/i
vue解决跨域问题(推荐)

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

1.跨域浏览器对于javascript的同源策略的限制,例如a.cn下面的js不能调用b.cn中的js,对象或数据(因为a.cn和b.cn是不同域),所以跨域就出现了. 上面提到的,同域的概念又是什么呢??? 简单的解释就是相同域名,端口相同,协议相同同源策略: 请求的url地址,必须与浏览器上的url地址处于同域上,也就是域名,端口,协议相同. 比如:我在本地上的域名是study.cn,请求另外一个域名一段数据,这个时候在浏览器上会报错,这个就是同源策略的保护,如果浏览器对javascri
如何使用Nginx解决跨域问题详解

目录先来说一下什么是同源策略什么是跨域? 跨域分类 Nginx解决跨域问题解释 1.Access-Control-Allow-Origin 2.Access-Control-Allow-Headers 是为了防止出现以下错误: 3.Access-Control-Allow-Methods 是为了防止出现以下错误: 4.给OPTIONS 添加 204的返回,是为了处理在发送POST请求时Nginx依然拒绝访问的错误预检请求(preflight request) 尾声先来说一下什么是同源策
AJAX请求以及解决跨域问题详解

目录 AJAX 介绍一.原生AJAX请求(GET) 二.jQuery AJAX请求(GET 和POST) 三.跨域问题的解决四.其他解决跨域问题方法总结 AJAX 介绍 AJAX其实就是异步的js和xml 通过ajax可以在浏览器中发送异步请求. 最大优势:无刷新获取数据优点: 1.可以无需刷新页面与服务器进行通信 2.允许根据用户事件更新部分页面内容当然也存在其缺点问题:比如跨域问题等! 一.原生AJAX请求(GET) 由于get和post请求类似,原生代码相比jQuery复杂一些:
利用Nginx反向代理解决跨域问题详解

问题在之前的分享的跨域资源共享的文章中,有提到要注意跨域时,如果要发送Cookie,Access-Control-Allow-Origin就不能设为*,必须指定明确的.与请求网页一致的域名.在此次项目开发中与他人协作中就遇到此类问题. 解决思路一般来说,与后台利用CORS跨域资源共享将Access-Control-Allow-Origin设置为访问的域名即可,这个需要后台的配合,且有些浏览器是不支持的. 基于与合作方后台的配合,利用nginx方向代理来满足浏览器的同源策略来实现跨域实现方法
Vue axios与Go Frame后端框架的Options请求跨域问题详解

跨域问题可从前后两端分开排查: 前端:Vue + axios axios 请求头使用 'Content-Type': 'application/json', 并且在Header中设置了 Authorization 字段用于传递 Token, 参数未经 Qs 转码, 使用以下代码测试登录接口: // 为方便操作,已将 axios 实例挂载到 this.$axios 上 this.$axios.post('/signin', {account: '', password: ''}) .then(re
Ajax解决跨域之设置CORS响应头实现跨域案例详解

1.设置CORS响应头实现跨域跨源资源共享(CORS) 1.1 什么是CORS CORS(Cross-Origin Resource Sharing),跨域资源共享.CORS 是官方的跨域解决方案,它的特点是不需要在客户端做任何特殊的操作,完全在服务器中进行处理,支持 get 和 post 请求.跨域资源共享标准新增了一组 HTTP 首部字段,允许服务器声明哪些源站通过浏览器有权限访问哪些资源 1.2 CORS 怎么工作的? CORS 是通过设置一个响应头来告诉浏览器,该请求允许跨域,浏览
前端跨域问题解决及七大跨域原理详解

目录为什么跨域? 跨域的时机? 同域情况 && 跨域情况? 解决跨域的方案 JSONP WebSocket Cors Node接口代理 Nginx postMessage document.domain && iframe 咱们做前端的,平时跟后端对接接口那是必须的事情,但是可能很多同学忽略了一个对接过程中可能会发生的问题——跨域,那跨域到底是啥呢?为什么会跨域呢?又怎么才能解决呢? 为什么跨域? 为什么会出现跨域问题呢?那就不得不讲浏览器的同源策略了,它规定了协议号-域
Vue-cli proxyTable 解决开发环境的跨域问题详解

和后端联调时总是会面对恼人的跨域问题,最近基于Vue开发项目时也遇到了这个问题,两边各自想了一堆办法,查了一堆资料,加了一堆参数,最后还得我把自己的localhost映射成上线时将要使用的域名. 今天翻看代码时,突然发现vue-cli的config文件里有一个参数叫proxyTable,看这个名字就感觉能解决问题,于是我就去搜了一下,果然.在vuejs-templates,也就是vue-cli的使用的模板插件里,有关于API proxy的说明,使用的就是这个参数. https://vuejs-t

Vue如何解决跨域问题详解

相关推荐

随机推荐