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

目录
  • 一、什么是跨域
  • 二、什么情况下会出现跨域
  • 三、uni-app 项目 解决跨域办法
  • 四、Vue.js 项目 解决跨域办法
  • 五、终极解决办法，删除浏览器跨域限制

一、什么是跨域

出于浏览器的同源策略限制。同源策略是一种约定，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，则浏览器的正常功能可能都会受到影响。知识点：跨域只会出现在浏览器上，小程序和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等信息）

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

赞 (0)

相关推荐

  • vue如何解决axios请求前端跨域问题

    vue如何解决axios请求前端跨域问题

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

  • vuecli3打包后出现跨域问题,前端配置拦截器无效的解决

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

  • js前端解决跨域的八种实现方案

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

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

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

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

  • gateway网关与前端请求跨域问题的解决方案

    gateway网关与前端请求跨域问题的解决方案

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

  • ajax请求前端跨域问题原因及解决方案

    ajax请求前端跨域问题原因及解决方案

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

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

    目录 一.什么是跨域 二.什么情况下会出现跨域 三.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解决前端跨域问题小结

    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解决前端跨域请求问题

    Security框架:如何使用CorsFilter解决前端跨域请求问题

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

  • Nginx解决前端访问资源跨域问题的方法详解

    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响应头实现跨域案例详解

    Ajax解决跨域之设置CORS响应头实现跨域案例详解

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

随机推荐