打开chorme的扩展程序（设置——>更多工具——>扩展程序）chrome://extensions
选择开发者模式

拖拽.crx至Chrome的扩展程序列表
安装失败

报错为：程序包无效:"CRX_HEADER_INVALID"



 

 

选择加载已解压的扩展程序
 



 

 

 




成功安装的操作如下：






 

成功安装

1. 当请求不在同一域名下的资源文件（ip地址+端口号）时，会报如下错误：

“No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin ‘http://localhost:8080’ is therefore not allowed access.”，翻译下，因为被请求的资源没有设置 ‘Access-Control-Allow-Origin’，所以 从’http://localhost:8080’ 发起的请求不被允许。
2. 原因：浏览器同源策略限制了此类请求。什么是同源策略？

同源策略/SOP（Same origin policy）是一种约定，由Netscape公司1995年引入浏览器，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，浏览器很容易受到XSS、CSFR等攻击。所谓同源是指"协议+域名+端口"三者相同，即便两个不同的域名指向同一个ip地址，也非同源。

同源策略限制以下几种行为：

1.) Cookie、LocalStorage 和 IndexDB 无法读取

2.) DOM 和 Js对象无法获得

3.) AJAX 请求不能发送

常见跨域场景

1.)同一域名下的不同文件或路径，允许访问。

http://www.domain.com/a.js

http://www.domain.com/b.js

http://www.domain.com/lab/c.js

2.)同一域名下的不同端口，  不允许访问。

http://www.domain.com:8000/a.js

http://www.domain.com/b.js

3.)同一域名下的不同协议，  不允许访问。

http://www.domain.com/a.js

https://www.domain.com/b.js

4.)同一ip地址下的不同域名之间，不允许访问。

http://www.domain.com/a.js

http://192.168.4.12/b.js

5.) 不同域名之间不允许访问。

http://www.domain1.com/a.js

http://www.domain2.com/b.js
3.解决办法。

1.)针对上面的错误提示，我们肯定可以通过在被请求的资源文件中添加 'Access-Control-Allow-Origin’来解决跨域问题。

(1)如果被请求的是静态HTML文件，则需要只需要在被请求的HTML文件中加上一下标签。
<meta http-equiv="Access-Control-Allow-Origin" content="*" />

(2)如果被请求的是java接口，则可以在响应头中加上：
response.setHeader("Access-Control-Allow-Origin", "http://www.domain1.com"); 

(3)如果被请求的是.net接口，则可以在响应头中加上：
Response.AddHeader("Access-Control-Allow-Origin", "*");

2.)另外一种方法就是从前端解决。前端可以通过jsonp请求的方式或者设置代理的方式解决。

(1)通过jsonp的方式。

跨域原理： 通常为了减轻web服务器的负载，我们把js、css，img等静态资源分离到另一台独立域名的服务器上，在html页面中再通过相应的标签从不同域名下加载静态资源，而被浏览器允许，基于此原理，我们可以通过动态创建script，再请求一个带参网址实现跨域通信。
原生实现：
 <script>
    var script = document.createElement('script');
    script.type = 'text/javascript';

    // 传参并指定回调执行函数为onBack
    script.src = 'http://www.domain2.com:8080/login?user=admin&callback=onBack';
    document.head.appendChild(script);

    // 回调执行函数
    function onBack(res) {
        alert(JSON.stringify(res));
    }
 </script>

jquery实现：
$.ajax({
    url: 'http://www.domain2.com:8080/login',
    type: 'get',
    dataType: 'jsonp',  // 请求方式为jsonp
     crossDomain: true,
	 success: function(data) {},
    data: {}
});

(2)通过请求代理的方式。

跨域原理： 同源策略是浏览器的安全策略，不是HTTP协议的一部分。服务器端调用HTTP接口只是使用HTTP协议，不会执行JS脚本，不需要同源策略，也就不存在跨越问题。

以下提供java/.net跨域文件的源码，请自行发布使用。请求代理文件源码地址：https://github.com/muziye2013/CrossDomainAccessProxy
a. 如果是.NET开发环境，请将下载的“DotNet”源码发布为网站



并将网站的物理路径，指向源码DotNet地址:



修改index.html页面中被请求的资源，在浏览器中访问index.html页面进行测试。
 var testUrl="http://172.17.0.130/***/query";//修改测试服务地址

b.如果是Java开发环境，请将下载的“Java”源码放在tomcat网站下的webapps目录下，



修改index.html页面中被请求的资源，启动tomcat，在浏览器中访问index.html页面进行测试。
以上，推荐使用第三种方式来进行配置，特别是对于前后端分离开发时，一劳永逸的解决跨域问题。
文章参考：https://segmentfault.com/a/1190000011145364

在本地用ajax跨域访问请求时报错：

 

XMLHttpRequest cannot loadhttp://www.zjblogs.com/. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access.

 

查了一翻资料，发现原来是新W3C标准中是这样规定的：

 

最新的W3C标准里是这么实现HTTP跨域请求的， Cross-Origin Resource Sharing

 

简单的来说，就是跨域的目标服务器要返回一系列的Headers，通过这些Headers来控制是否同意跨域。这些Headers有：4 Syntax

 

 


	
4.1 Access-Control-Allow-Origin HTTP Response Header
	
	

	
4.2 Access-Control-Max-Age HTTP Response Header
	
	

	
4.3 Access-Control-Allow-Credentials HTTP Response Header
	
	

	
4.4 Access-Control-Allow-Methods HTTP Response Header
	
	

	
4.5 Access-Control-Allow-Headers HTTP Response Header
	
	

	
4.6 Origin HTTP Request Header
	
	

	
4.7 Access-Control-Request-Method HTTP Request Header
	
	

	
4.8 Access-Control-Request-Headers HTTP Request Header
	
 

在 Request 包和 Response 包中都有一些。

其中最敏感的就是 Access-Control-Allow-Origin 这个 Header, 他是W3C标准里用来检查该跨域请求是否可以被通过。 (Access Control Check)

跨域实现的过程大致如下:

从 http://www.a.com/test.html 发起一个跨域请求，

请求的地址为： http://www.b.com/test.PHP

如果 服务器B返回一个如下的header

Access-Control-Allow-Origin: http://www.a.com

那么，这个来自 http://www.a.com/test.html 的跨域请求就会被通过。

 

如上所知，总结解决办法如下：

 

1、如果请求的url是aspx页面，则需要在aspx页面中添加代码：Response.AddHeader("Access-Control-Allow-Origin", "*");

 

2、如果请求的url是PHP页面，则需要在PHP页面中添加代码：header("Access-Control-Allow-Origin: *");

 

3、如果请求的url是静态的html页面，则需要在页面中添加meta标签代码：<meta http-equiv="Access-Control-Allow-Origin" content="*" />

 

如果服务器端可以确定是要被哪些域名访问，最好是能把以上代码中的“*”代替为具体的域名，这样做可以相应的增强安全性。

 

 

如果还不行，就把这些都加上吧

 

// 指定允许其他域名访问    
	
header('Access-Control-Allow-Origin:*');    
	
// 响应类型    
	
header('Access-Control-Allow-Methods:POST');    
	
// 响应头设置    
	
header('Access-Control-Allow-Headers:x-requested-with,content-type');  
更多文章请关注公众号「大叔说码」，大叔将在公众号上跟大家继续分享面试，语言基础，实战等干货



 

http request 请求头主要包括内容如下：




header名
作用
示例




Accept
指定客户端能够接收的内容类型
Accept: text/plain, text/html


Accept-Charset
浏览器可以接受的字符编码集。
Accept-Charset: iso-8859-5


Accept-Language
浏览器可接受的语言
Accept-Language: en,zh


Accept-Encoding
指定浏览器可以支持的web服务器返回内容压缩编码类型。
Accept-Encoding: compress, gzip


Cookie
HTTP请求发送时，会把保存在该请求域名下的所有cookie值一起发送给web服务器。
Cookie: $Version=1; Skin=new;


Content-Type
请求的与实体对应的MIME信息
Content-Type: application/x-www-form-urlencoded


Content-Length
请求的内容长度
Content-Length: 520


Host
指定请求的服务器的域名和端口号
Host: www.juziwulian.com


From
发出请求的用户的Email
From: kaadas@email.com


Expect
请求的特定的服务器行为
Expect: 100-continue


Date
请求发送的日期和时间
Date: Tue, 15 Nov 2020 15:10:01 GMT