跨域浏览器设置解决前端跨域问题

2024-07-30 15:09:10

一、什么是跨域

出于浏览器的同源策略限制。同源策略是一种约定，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，则浏览器的正常功能可能都会受到影响。知识点：跨域只会出现在浏览器上，小程序和APP开发不会有跨域问题

二、什么情况下会出现跨域

说人话就是域名不同的时候会出现跨域。下面以百度域名为例，在域名的：协议、主机名、域名、端口任何一个与当前访问的站点域名不同时就会出现跨域

https://www.baidu.com:443

出现跨域时，浏览器控制台的报错如下图所示

切记：本文章只讲述 前端解决跨域的办法，并且前端解决跨域问题只在本地开发时有效，项目发布线上需要前端服务器配置请求代理比如 nginx的反向代理或后端允许跨域请求

解决跨域的方法就是“欺骗”浏览器或删除浏览器限制

三、uni-app 项目解决跨域办法

方法一：使用 HBuilderX 内置浏览器，内置浏览器是删除了浏览器的跨域限制的。

方法二：在项目根目录 manifest.json 文件中添加 h5 配置，点我查看 uni-app 文档说明。

"h5" : {
    "devServer":{
        "proxy":{
            "^/api":{
                "target":"http://127.0.0.1:8081",
                "ws": true,
                "changeOrigin": true
            }
        }
    }
}

页面请求代码示例

uni.request({
	url:'/api/1.json',    // url 要与 proxy 匹配，不能写成 xx.com/api.1.json
	method:'GET',
	success: (res) => {
		console.log(res);
	}
})

四、Vue.js 项目解决跨域办法

在项目根目录 vue.config.js 文件中添加如下配置

/* 开发环境配置 */
devServer:{
    /* 代理目录 */
    proxy:{
        '^/api':{
            target:'http://127.0.0.1:8081',
            ws: true,
            changeOrigin: true
        }
    }
}

页面请求代码，以 axios 库为例

request.get('/api/1.json',{
    params
}).then(res=>{
    console.log(res)
})

五、终极解决办法，删除浏览器跨域限制

如果你的项目不是工程化的，比如 jQuery 技术栈的话用这种方式最简单粗暴

以 chrome 浏览器为例

【设置步骤】

新建一个 Chrome 的桌面快捷方式在快捷方式上右键，点击【属性】，打开【属性】面板在【属性】面板的【目标】中（chrome.exe 后面）按一下空格，再添加以下代码：

--args --disable-web-security
--user-data-dir=D:\MyChromeDevUserData

或者

--disable-web-security
--user-data-dir=D:\MyChromeDevUserData

设置成功以后再打开浏览器，会有提示：

“您使用的是不受支持的‘命令行’标记： --disable-web-security，稳定性和安全性会有所下降”

此时，正常用户都可以进行跨域访问了，比方本地的前端项目，直连测试或者线上环境的接口（前提是目标环境在当前浏览器登陆过，已经存在当前账号的cookies，session等信息）

以上就是跨域浏览器设置解决前端跨域问题的详细内容，更多关于跨域浏览器设置的资料请关注我们其它相关文章！

前端面试必会网络跨域问题解决方法

目录什么是跨域跨域解决方法1-代理跨域解决方法2-JSONP 跨域解决方法3-CORS 概述简单请求简单请求的判定简单请求的交互规范需要预检的请求附带身份凭证的请求一个额外的补充什么是跨域浏览器有一个重要的安全策略,称之为「同源策略」其中,源=协议+主机+端口源=协议+主机+端口源=协议+主机+端口,两个源相同,称之为同源,两个源不同,称之为跨源或跨域比如: 源 1 源 2 是否同源 www.baidu.com www.baidu.com/news www.baidu.
vuecli3打包后出现跨域问题,前端配置拦截器无效的解决

目录打包后跨域问题,前端配置拦截器无效问题解决方案 vue3处理跨域问题打包后跨域问题,前端配置拦截器无效问题这几天在把项目弄好,打包完成后发现之前cli配置的拦截器没有在打包后没起到作用,使用别的方法通过nginx反向代理进行配置跨域. 解决方案在nginx里面的nginx.config里面配置配置如下 server { listen 80;#监听端口 server_name localhost;#代理服务地址 add_header Access-Control-Allow-O
vue如何解决axios请求前端跨域问题

目录前言一.为什么会出现跨域的问题? 二.解决方案跨域资源共享(CORS) 写在最后前言最近在写纯前端的vue项目的时候,碰到了axios请求本机的资源的时候,出现了访问报404的问题.这就让我很难受.查询了资料原来是跨域的问题. 在正常开发中跨域问题有很多的解决方案.最常见的就是后端修改响应头.但是前端也可以解决,通过反向代理.为了防止下一次这样的错误出现,记录一下,总结一下. 所以现在我们来复盘一下,然后解决掉. 一.为什么会出现跨域的问题? 跨域:浏览器从一个域名的网页去请求另一
js前端解决跨域的八种实现方案

由于同源策略的限制,满足同源的脚本才可以获取资源.虽然这样有助于保障网络安全,但另一方面也限制了资源的使用. 那么如何实现跨域呢,以下是实现跨域的一些方法. 一.jsonp跨域原理:script标签引入js文件不受跨域影响.不仅如此,带src属性的标签都不受同源策略的影响. 正是基于这个特性,我们通过script标签的src属性加载资源,数据放在src属性指向的服务器上,使用json格式. 由于我们无法判断script的src的加载状态,并不知道数据有没有获取完成,所以事先会定义好处理函数.服
ajax请求前端跨域问题原因及解决方案

目录一.跨域是怎么形成的二.导致跨域的根本原因三.解决方法 1 .JSONP 2. CORS 3 .代理转发一.跨域是怎么形成的当我们请求一个url的协议.域名.端口三者之间任意一个与当前页面url的协议.域名.端口不同这种现象我们把它称之为跨域跨域会导致: 1.无法读取非同源网页的 Cookie.LocalStorage 和 IndexedDB 2.无法接触非同源网页的 DOM 3.无法向非同源地址发送 AJAX 请求(可以发送,但浏览器会拒绝接受响应) 二.导致跨域的根本原因
gateway网关与前端请求跨域问题的解决方案

gateway网关与前端请求的跨域问题最近因项目需要,引入了gateway网关.可是发现将前端请求的端口指向网关后,用postman发送请求是正常的,用浏览器页面点击请求会出现跨域问题.今天就记录一下自己是怎么解决的. 第一种直接在yml文件中配置 spring: application: name: service-getway cloud: gateway: globalcors: cors-configurations: '[/**]': # 允许携带认证信息 # 允许跨域的源(网站域
跨域浏览器设置解决前端跨域问题

目录一.什么是跨域二.什么情况下会出现跨域三.uni-app 项目解决跨域办法四.Vue.js 项目解决跨域办法五.终极解决办法,删除浏览器跨域限制一.什么是跨域出于浏览器的同源策略限制.同源策略是一种约定,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,则浏览器的正常功能可能都会受到影响.知识点:跨域只会出现在浏览器上,小程序和APP开发不会有跨域问题二.什么情况下会出现跨域说人话就是域名不同的时候会出现跨域.下面以百度域名为例,在域名的:协议.主机名.域名.
利用Nginx代理如何解决前端跨域问题详析

前言 Nginx(发音同"engine X")是异步框架的网页服务器,也可以用作反向代理.负载平衡器和HTTP缓存. 本文将讲述如何使用 Nginx 在 Web 前后端分离开发中实现路由的转发. Web 开发通常使用的是前后端分离的开发模式,即前端和后端分别进行开发,前端通过 Ajax 请求后端的接口,将获取数据将数据渲染到页面上.前端开发会使用脚手架搭建前端开发环境,其底层通常会启动一个本地服务器,通常使用的是 nodejs 的 Express 框架.而后端则是提供接口,一般是放在线
JSONP跨域GET请求解决Ajax跨域访问问题

前几天,工作上有一新需求,需要前端web页面异步调用后台的Webservice方法返回信息.实现方法有多种,本例采用jQuery+Ajax,完成后,在本地调试了一切ok,但是部署到服务器上以后就出现问题了,后台服务调用没有响应,怎么回事?代码没怎么改动,唯一修改的地方就是jQuery的ajax方法中的url地址.难道是这里的问题,经过检查和调试,发现原来是同源策略在作怪,我们知道,JavaScript或jQuery是在Web前端开发中经常使用的动态脚本技术.在JavaScript中,有一个很重要
如何用Nginx解决前端跨域问题

前言在开发静态页面时,类似Vue的应用,我们常会调用一些接口,这些接口极可能是跨域,然后浏览器就会报cross-origin问题不给调. 最简单的解决方法,就是把浏览器设为忽略安全问题,设置--disable-web-security.不过这种方式开发PC页面到还好,如果是移动端页面就不行了. 解决办法使用Nginx转发请求.把跨域的接口写成调本域的接口,然后将这些接口转发到真正的请求地址. 举个栗子例如我们在开发一个Vue应用. 原先: 调试页面是: http://192.168.1.1
springboot+jsonp解决前端跨域问题小结

现在咱们一起来讨论浏览器跨域请求数据的相关问题.说这样可能不是很标准,因为拒绝跨域请求数据并不是浏览器所独有的,之所以会出现跨域请求不了数据,是因为浏览器基本都实现了一个叫"同源策略"的安全规范.该规范具体是什么呢?我们在MDN上找到了一份资料,地址如下: 浏览器同源策略讲解总的来说,当A网址和B网址在协议 . 端口 . 域名方面存在不同时,浏览器就会启动同源策略,拒绝A.B服务器之间进行数据请求. 说了同源策略,纸上得来终觉浅,绝知此事要躬行,到底同源策略是怎么体现的呢?下面我
解决前端跨域问题方案汇总

1.同源策略如下: URL 说明是否允许通信 http://www.a.com/a.js http://www.a.com/b.js 同一域名下允许 http://www.a.com/lab/a.js http://www.a.com/script/b.js 同一域名下不同文件夹允许 http://www.a.com:8000/a.js http://www.a.com/b.js 同一域名,不同端口不允许 http://www.a.com/a.js https://www.a.com/b
Security框架:如何使用CorsFilter解决前端跨域请求问题

目录项目情况 CORS介绍解决方案项目情况最近做的pmdb项目是前后端分离的, 由于测试的时候是前端与后端联调,所以出现了跨域请求的问题. 浏览器默认会向后端发送一个Options方式的请求,根据后端的响应来判断后端支持哪些请求方式,支持才会真正的发送请求. CORS介绍 CORS(Cross-Origin Resource Sharing 跨源资源共享),当一个请求url的协议.域名.端口三者之间任意一与当前页面地址不同即为跨域. 在日常的项目开发时会不可避免的需要进行跨域操作,而在实
Nginx解决前端访问资源跨域问题的方法详解

被前端跨域问题折磨快2天后,终于用ngnx的方式解决了,所以在此总结下. 该篇只探讨如何用Ngnx解决跨域问题,对于原理不作讨论. 1.首先介绍Windows环境下Nignx的相关命令操作 nginx常用命令: 验证配置是否正确: nginx -t 查看Nginx的版本号:nginx -V 启动Nginx:start nginx 快速停止或关闭Nginx:nginx -s stop 正常停止或关闭Nginx:nginx -s quit 配置文件修改重装载命令:nginx -s reload 在停
Ajax解决跨域之设置CORS响应头实现跨域案例详解

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