关闭谷歌安全策略 解决跨域

问题背景

本地开发需要联调线上地址,使用vite中的反向代理对线上地址进行跨域处理。结果浏览器还是报跨域的问题 No ‘Access-Control-Allow-Origin’ header is present on the requested resource.

解决方案

  • Mac用户 打开终端 输入
  open -n /Applications/Google\ Chrome.app/ --args --disable-web-security --user-data-dir=/tmp

open -n: 这是 macOS 中的一个命令,用于打开应用程序。
/Applications/Google\ Chrome.app/: 这是 Google Chrome 浏览器的应用程序位置。
–args: 这是一个标志,表示后面的参数将传递给应用程序。
–disable-web-security: 这是 Chrome 浏览器的一个参数,用于禁用浏览器的同源策略。这意味着浏览器将不再强制执行来自不同源的网页间的安全策略,这可能有助于开发人员在本地测试跨域请求。
–user-data-dir=/tmp: 这也是 Chrome 浏览器的一个参数,它指定了用户数据目录的位置。在这里,用户数据被指定为 /tmp 目录,这意味着 Chrome 将在每次启动时使用临时目录中的新用户数据,而不是默认的用户数据目录。

执行完毕, 当看到浏览器顶部有提示则说明取消跨域成功

  • Windows用户 复制一个新的chrome浏览器快捷方式, 右键打开属性,在目标地址后面加上如下参数:
 --args --disable-web-security --user-data-dir=C:/tmp
  tip:C:/tmp 可以指定自己的目录位置 用于存放临时的用户数据 

目标地址: “C:\Users\ThinkPad\AppData\Local\Google\Chrome\Application\chrome.exe”
加完后目标地址: “C:\Users\ThinkPad\AppData\Local\Google\Chrome\Application\chrome.exe” --args --disable-web-security --user-data-dir=C:/tmp

执行完毕, 当看到浏览器顶部有提示则说明取消跨域成功

  • 3
    点赞
  • 12
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
CORS(Cross-Origin Resource Sharing)是一种机制,用于在跨域请求中允许服务器端资源被访问。通常情况下,浏览器会阻止跨域请求,但是在使用CORS策略后,浏览器会发送一个预检请求(preflight request)来检查服务器是否允许跨域请求访问。 在服务器端,可以通过设置响应头来允许跨域请求。以下是一个简单的Node.js服务器端示例: ```javascript const http = require('http'); const server = http.createServer((req, res) => { if (req.method === 'OPTIONS') { res.writeHead(204, { 'Access-Control-Allow-Origin': '*', //设置允许跨域访问的域名 'Access-Control-Allow-Methods': 'GET, POST, PUT, DELETE, OPTIONS', //允许请求的方法 'Access-Control-Allow-Headers': 'Content-Type, Authorization' //允许请求的头部信息 }); res.end(); } else { //处理其他请求逻辑 } }); server.listen(8080, () => { console.log('Server is running at http://localhost:8080'); }); ``` 在以上示例中,我们设置了允许跨域访问的域名为任意域名('Access-Control-Allow-Origin': '*'),允许请求的方法为GET、POST、PUT、DELETE以及OPTIONS('Access-Control-Allow-Methods'),允许请求的头部信息为Content-Type和Authorization('Access-Control-Allow-Headers')。 当客户端发送跨域请求时,浏览器会首先发送一个OPTIONS请求,该请求的响应头中包含了以上设置信息,服务器端成功响应后,客户端才能发送真正的跨域请求。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值