26、vue前端出现跨域问题，如何解决跨域？

问题：

因为浏览器的同源策略的限制问题（协议、主机、端口一致），浏览器访问非同源的网址时,会出现无法获取数据（已发请求，服务器已收到请求）,出现跨域问题

3种解决方法：

1、cors跨域(配置服务器) ：

全称 “跨域资源共享”，原理：它允许浏览器向跨源服务器，发出XMLHttpRequest请求（配置响应头Accesse-Control-Allow-Origin:"*",违背任意一条同源策略都能访问响应数据），从而克服了AJAX只能同源使用的限制。

缺点：这样会造成任何人都能向这台服务器要数据。

2、jsonp跨域：

原理：动态生成script标签，通过src引入接口地址(因为src不存在跨域的)；请求数据类型dataType为jsonp，缺陷只支持get请求，且存在一些安全隐患

3、代理服务器：

借助vue-cli脚手架开启代理服务器，在vue.config.js文件中配置proxy，原理：先请求本地服务器，本地服务器再去请求真正的后台服务器，最后本地服务器再将请求回来的数据返回给浏览器（本地服务器跟浏览器之间不存在跨域）

配置多个代理代码：

devServer: {proxy: {//灵活代理；请求前缀为/api时，走下面的代理'/api': {target: 'url',//代理服务器把请求转发给url(真正的后台服务器)ws: true,//用于支持websocketchangeOrigin: true,//用于控制请求头中的host值//真正的服务器没有/api，所以要重写路径置空，否则找不到相应的路径pathRewrite: {//匹配以api开头的路径置空'^api': ''}},//配置多个代理；请求前缀为/demo时，走下面的代理'/demo': {target: 'url2',//代理服务器把请求转发给url2(真正的后台服务器)ws: true,//用于支持websocketchangeOrigin: true,//用于控制请求头中的host值//真正的服务器没有/api，所以要重写路径置空，否则找不到相应的路径pathRewrite: {//匹配以api开头的路径置空'^demo': ''}},}}

26、vue前端出现跨域问题，如何解决跨域？相关推荐

前端如何使用proxyTable和nginx解决跨域问题
前端如何使用proxyTable和nginx解决跨域问题参考文章: (1)前端如何使用proxyTable和nginx解决跨域问题 (2)https://www.cnblogs.com/webhmy ...
vue开发环境和生产环境里面解决跨域的几种方法
vue开发环境和生产环境里面解决跨域的几种方法参考文章: (1)vue开发环境和生产环境里面解决跨域的几种方法 (2)https://www.cnblogs.com/pass245939319/p/ ...
【VUE】vue在vue-cli3环境下基于axios解决跨域问题
[VUE]vue在vue-cli3环境下基于axios解决跨域问题参考文章: (1)[VUE]vue在vue-cli3环境下基于axios解决跨域问题 (2)https://www.cnblogs. ...
什么是跨域及如何解决跨域问题
什么是跨域 web 领域开发中,经常采用前后端分离模式.这种模式下,前端和后端分别是独立的 web 应用程序,例如:后端是 Java 程序,前端是 React 或 Vue 应用. 各自独立的 web ...
什么是跨域及怎么解决跨域问题？
什么是跨域? 这篇博文解释的挺清楚,我直接引用什么是跨域?怎么解决跨域问题?_L瑜-CSDN博客_跨域是什么意思跨域,指的是浏览器不能执行其他网站的脚本.它是由浏览器的同源策略造成的,是浏览器施加 ...
什么是同源策略，什么是跨域，如何解决跨域
1.什么是同源策略? 同源策略/SOP(Same origin policy)是一种约定,由 Netscape 公司 1995 年引入浏览器,它是浏览器最核心也最基本的安全功能,现在所有支持 Java ...
微服务电商实战(十一)搭建vue项目对接注册登陆接口，解决跨域问题，使用七牛云实现头像上传
一.简介 node.js版本:v12.16.3 node.js下载 vue官网教程 iview介绍上传头像接口,图片存储在七牛云中,注册并实名认证之后可以免费使用以下会描述使用vue搭建项目框架的 ...
前端学习（2442）：解决跨域问题
1.同源策略如下: URL 说明是否允许通信 http://www.a.com/a.js http://www.a.com/b.js 同一域名下允许 http://www.a.com/lab/a. ...
vue+Java后端进行调试时如何解决跨域问题
今天在开发过程中遇到一个问题,拿到了一套vue代码,计划对这套代码的部分样式进行调整,Java后端代码已经写好并且部署到了线上.这时命令行运行vue项目时访问会受限,取不下数据来,遇到了跨域访问失败的 ...
Node.js 模块化的操作，简单明了的代码帮助你明白后端的实现和前端之前的交互，及解决跨域等问题
Node.JS 模块化 1.require 导入模块const http=require('http')2.exports 导出模块db={name:'jine',age:22} module.e ...

26、vue前端出现跨域问题，如何解决跨域？

问题：

因为浏览器的同源策略的限制问题（协议、主机、端口一致），浏览器访问非同源的网址时,会出现无法获取数据（已发请求，服务器已收到请求）,出现跨域问题

3种解决方法：

1、cors跨域(配置服务器) ：

全称 “跨域资源共享”，原理：它允许浏览器向跨源服务器，发出XMLHttpRequest请求（配置响应头Accesse-Control-Allow-Origin:"*",违背任意一条同源策略都能访问响应数据），从而克服了AJAX只能同源使用的限制。

缺点：这样会造成任何人都能向这台服务器要数据。

2、jsonp跨域：

原理：动态生成script标签，通过src引入接口地址(因为src不存在跨域的)；请求数据类型dataType为jsonp，缺陷只支持get请求，且存在一些安全隐患

3、代理服务器：

借助vue-cli脚手架开启代理服务器，在vue.config.js文件中配置proxy，原理：先请求本地服务器，本地服务器再去请求真正的后台服务器，最后本地服务器再将请求回来的数据返回给浏览器（本地服务器跟浏览器之间不存在跨域）

配置多个代理代码：

26、vue前端出现跨域问题，如何解决跨域？相关推荐

最新文章

热门文章