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

原文地址:https://www.cnblogs.com/xb21/p/8386131.html

时间: 2024-08-29 10:23:56

Mac上设置Chrome跨域的相关文章

chrome跨域设置

最近在学习Angular路由,用版本为54.0的chrome运行示例中的html时出现禁止跨域现象,如下: google了下解决方法,转载如下,原文地址:http://www.cnblogs.com/cshi/p/5660039.html 做前后分离的webapp开发的时候,出于一些原因往往需要将浏览器设置成支持跨域的模式,好在chrome浏览器就是支持可跨域的设置,网上也有很多chrome跨域设置教程.但是新版本的chrome浏览器提高了跨域设置的门槛,原来的方法不再适用了.下面笔者简单介绍一

解决Chrome跨域问题 - 跨域系列

解决Chrome跨域问题 - 跨域系列 团子家族_方糖咖啡 关注 0.3 2018.06.21 17:36* 字数 385 阅读 5951评论 0喜欢 2 解决Chrome跨域问题,首先注意要区分Chrome版本,49之前的版本和49之后的版本处理方法不同.具体如下: Chrome49之后的版本: Windows: 1.关闭所有的chrome浏览器. 2.新建一个chrome快捷方式,右键“属性”,“快捷方式”选项卡里选择“目标”,添加  --args --disable-web-securit

nodejs设置允许跨域

//设置服务器跨域权限app.use(function (req, res, next) {    res.header("Access-Control-Allow-Origin", "*");    res.header("Access-Control-Allow-Headers", "X-Requested-With");    res.header("Access-Control-Allow-Methods&q

express设置允许跨域访问该服务.

const express = require('express');const app = express(); //设置允许跨域访问该服务.app.all('*', function (req, res, next) { res.header('Access-Control-Allow-Origin', '*'); //Access-Control-Allow-Headers ,可根据浏览器的F12查看,把对应的粘贴在这里就行 res.header('Access-Control-Allow

asp.net设置允许跨域

String origin = filterContext.HttpContext.Request.Headers["Origin"]; filterContext.HttpContext.Response.AppendHeader("Access-Control-Allow-Origin", "*");//设置允许跨域 filterContext.HttpContext.Response.AppendHeader("Access-Co

mac上设置新版chrome浏览器跨域

设置方法 打开一个新的可跨域的chrome窗口实现方法: 1. 打开终端 2. 输入下面的命令( 需要替换路径中的yourname ) open -n /Applications/Google\ Chrome.app/ --args --disable-web-security --user-data-dir=/Users/yourname/MyChromeDevUserData/ 注意 网上有些文章--user-data-dir参数后面没有添加文件夹名,是设置不成功的. 发现 第一次打开chr

Mac上更改Chrome的主题

(以下的前提是Mac Chrome) 直接使用Chrome调试器编写代码的同学福音,如何设置自己的调试器,使其能够应用各种主题,达到Sublime等的视觉效果~本文对新旧版本的Chrome浏览器都可以(Stackoverflow上说分割点是Chrome 33),直奔主题: Mac上对于低版本的chrome浏览器: 1)找到合适Chome主题css文件(例如Obsidian for chrome developer tools) 直接~/Library/Application Support/Go

Java设置接口跨域

现在我们很多项目都是基于Java的REST结构风格前后端分离,在前端访问后端的时候就存在跨域,这个时候后端接口不处理就会存在访问不了.上代码! 1.创建一个Filter 在web.xml中配置 <filter> <filter-name>xssAndSqlFilter</filter-name> <filter-class>com.tzdr.btc.user.filter.XssAndSqlFilter</filter-class> <!-

vue-cli3设置代理跨域详解

老规矩,先上代码 // 在根目录下自行创建vue.config.js module.exports = { // cli3 代理是从指定的target后面开始匹配的,不是任意位置:配置pathRewrite可以做替换 devServer: { port: '8080', open: true, proxy: { '/api': { // /api 的意义在于,声明axios中url已/api开头的请求都适用于该规则, // 注意是以/api开头,即:axios.post({url: '/api/