Mac上设置Chrome跨域

Posted xb21

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Mac上设置Chrome跨域相关的知识,希望对你有一定的参考价值。

在本地用js文件发送ajax请求,向服务器获取数据时,会报

Failed to load http://xxx.xx.xx.xxx
No \'Access-Control-Allow-Origin\' header is present on the requested resource
Origin \'http://localhost:63342\' is therefore not allowed access.

原因是出现了跨域,而ajax只能同源使用

何为同源

浏览器安全的基石是"同源政策"(same-origin policy)
1995年,同源政策由 Netscape 公司引入浏览器。目前,所有浏览器都实行这个政策。
最初,它的含义是指,A网页设置的 Cookie,B网页不能打开,除非这两个网页"同源"。所谓"同源"指的是"三个相同"。
协议相同
域名相同
端口相同
举例来说,http://www.example.com/dir/page.html 这个网址
协议是 http:// ,域名是 www.example.com ,端口是80(默认端口可以省略)
它的同源情况如下
http://www.example.com/dir2/other.html 同源
http://example.com/dir/other.html 不同源(域名不同)
http://v2.www.example.com/dir/other.html 不同源(域名不同)
http://www.example.com:81/dir/other.html 不同源(端口不同)
1.2 目的
同源政策的目的,是为了保证用户信息的安全,防止恶意的网站窃取数据。
设想这样一种情况:A网站是一家银行,用户登录以后,又去浏览其他网站。如果其他网站可以读取A网站的 Cookie,会发生什么?
很显然,如果 Cookie 包含隐私(比如存款总额),这些信息就会泄漏。更可怕的是,Cookie 往往用来保存用户的登录状态,如果用户没有退出登录,其他网站就可以冒充用户,为所欲为。因为浏览器同时还规定,提交表单不受同源政策的限制。
由此可见,"同源政策"是必需的,否则 Cookie 可以共享,互联网就毫无安全可言了。
1.3 限制范围
随着互联网的发展,"同源政策"越来越严格。目前,如果非同源,共有三种行为受到限制。
(1) Cookie、LocalStorage 和 IndexDB 无法读取。
(2) DOM 无法获得。
(3) AJAX 请求不能发送。
虽然这些限制是必要的,但是有时很不方便,合理的用途也受到影响。
原文地址:
http://www.ruanyifeng.com/blog/2016/04/same-origin-policy.html

而本地ip和服务器不是同源,所以ajax发送不成功
那就得想办法解决,去网上找资料发现
flask有库可以用,http://flask-cors.readthedocs.io/en/latest/
nginx也可以做

但需求其实是前端想在本地调试ajax,所以犯不着去动服务器,因为这个东西存在一些安全隐患
所以找了最简单的方式:

  • chrome有一个叫Allow-Control-Allow-Origin: *的插件,
    https://chrome.google.com/webstore/detail/allow-control-allow-origi/nlfbmbojpeacfghkpbjhddihlkkiljbi
    但这个插件开启了后,在pycharm里用chrome打开html文件会报404,不懂什么问题,但它确实能用

  • 还有一个是在mac终端里输入,注意yourname是mac用户的名字
    open -n /Applications/Google\\ Chrome.app/ --args --disable-web-security --user-data-dir=/Users/yourname/MyChromeDevUserData/
    这样会打开一个不安全的chrome,相当于沙箱模式的浏览器
    在这个chrome里能随意发送ajax请求,当然也只是做测试用

参考:
http://www.cnblogs.com/mackxu/p/cross-domain.html
http://www.ruanyifeng.com/blog/2016/04/cors.html

以上是关于Mac上设置Chrome跨域的主要内容,如果未能解决你的问题,请参考以下文章

mac版chrome怎么设置跨域访问

windows & mac chrome浏览器的跨域设置—包括版本49前后两种设置

前端开发:Mac环境的Chrome浏览器设置跨域请求的SameSite解决方法

Mac上Chrome浏览器跨域解决方案

Mac上解决Chrome浏览器跨域问题

Chrome设置允许ajax跨域