打开chorme的扩展程序（设置——>更多工具——>扩展程序）chrome://extensions
选择开发者模式
 
拖拽.crx至Chrome的扩展程序列表
安装失败
 
报错为：程序包无效:"CRX_HEADER_INVALID"
 
 
 
 
 
 
选择加载已解压的扩展程序
 
 
 
 
 
 
 
 
 
 
 
 
成功安装的操作如下：
 
 
 
 
 
 
成功安装
 

1 浏览器的限制
 
2 跨域
 
3 浏览器发送的是 XHR (XMLHttpRequest)请求
 
当以上三个条件都满足时浏览器会抛出跨域请求异常（记住是浏览器抛出的异常，和服务端没太大关系），在讲跨域请求解决方案前先了解几个问题。
 
1 http请求中，哪些是常见的简单请求，哪些是非简单请求
 
常见的简单请求：请求方法为：GET ，HEAD，POST，请求header里面无自定义头，Content-Type为以下几种：text/plain  multipart/form-data application/x-www-form-urlencoded
 
常见的非简单请求 ：请求方法为：put delete的ajax请求，发送json格式的ajax请求，带自定义头的ajax请求
 
2 浏览器在发送跨域请求时候，会有哪些过程
 
如果是简单请求，浏览器会先发送请求，然后判断服务器返的返回头中是否支持跨域请求，否则抛出跨域异常
 
如果是非简单请求，浏览器会先发出OPTIONS请求方法的检测命令，判断服务器是否支持跨域请求，如果支持则发送真正的请求，如果不支持则抛出跨域异常，因此一个非简单请求每次会发送两个请求，后面跨域解决方案会讲到缓存OPTIONS预检请求
 
跨域解决方案
 
 
方案1:  禁用浏览器跨域校验,即允许跨域访问,(这种方案不可取,不可能让所有的浏览器设置允许跨域访问)
 
谷歌浏览器禁用跨域校验: 创建一个快捷方式发送到桌面 ，快捷方式--》右键---》属性页面中的目标输入框里追加  --disable-web-security --user-data-dir=C:\Program Files (x86)\Google\Chrome\Application （注意：--user-data-dir的值就是浏览器安装目录。）不一定生效
 
方案2: 采用jsonp方式,需要后台和前台同时改动代码,
 
1 前台需要设置callback参数,如果使用的是jquery ajax 那么dateType属性设置为jsonp，jquery框架会自动设置参数名为callback的请求参数,也可以通过jsonp属性修改jsonp请求参数名，其他js框架根据具体api使用,
 
2 后台接收到callback参数后认为是jsonp请求,需要返回jsonp格式,普通json请求返回的content-Type是application/json,而jsonp返回的是application/javascript,同时也证明了jsonp请求服务端返回的是js脚本
 
3 jsonp请求参数名前后约定需要相同，例如jquery默认使用的是callback
 
弊端：jsonp 需要前后端都去修改代码，且jsonp是通过动态创建script脚本发送请求，仅支持 GET方法，jsonp发出的请求不是xhr请求，也是能解决跨域的原因
 
 
方案3 服务端解决跨域问题
 
通过编写filter在response对象中添加响应头，告诉浏览器允许跨域访问，* 号代码允许所有的请求域名，所有的请求方法跨域访问
 
@WebFilter("/*")
public class CORSFilter implements Filter {

    @Override
    public void doFilter(ServletRequest servletRequest, ServletResponse servletResponse, FilterChain chain) throws IOException, ServletException {
        HttpServletRequest request = (HttpServletRequest) servletRequest;
        HttpServletResponse resp = (HttpServletResponse) servletResponse;

        // 告诉浏览器允许所有的域访问
        // 注意 * 不能满足带有cookie的访问,Origin 必须是全匹配
        // resp.addHeader("Access-Control-Allow-Origin", "*");
        // 解决办法通过获取Origin请求头来动态设置
        String origin = request.getHeader("Origin");
        if (StringUtils.hasText(origin)) {
            resp.addHeader("Access-Control-Allow-Origin", origin);
        }
        // 允许带有cookie访问
        resp.addHeader("Access-Control-Allow-Credentials", "true");

        // 告诉浏览器允许跨域访问的方法
        resp.addHeader("Access-Control-Allow-Methods", "*");

        // 告诉浏览器允许带有Content-Type,header1,header2头的请求访问
        // resp.addHeader("Access-Control-Allow-Headers", "Content-Type,header1,header2");
        // 设置支持所有的自定义请求头
        String headers = request.getHeader("Access-Control-Request-Headers");
        if (StringUtils.hasText(headers)) {
            resp.addHeader("Access-Control-Allow-Headers", headers);
        }

        // 告诉浏览器缓存OPTIONS预检请求1小时,避免非简单请求每次发送预检请求,提升性能
        resp.addHeader("Access-Control-Max-Age", "3600");

        chain.doFilter(request, resp);
    }
}
 
方案4 Spring框架提供了跨域解决方案
 
spring提供了 @CrossOrigin注解用户解决跨域问题,同时支持全局配置
 
@Configuration
@EnableWebMvc
public class WebConfig extends WebMvcConfigurerAdapter {
	@Override
	public void addCorsMappings(CorsRegistry registry) {
		registry.addMapping("/api/**")
			.allowedOrigins("http://domain2.com")
			.allowedMethods("PUT", "DELETE")
			.allowedHeaders("header1", "header2", "header3")
			.exposedHeaders("header1", "header2")
			.allowCredentials(false).maxAge(3600);
	}
}
 
方案5 服务端通过ngnix解决跨域问题 
 
location /{
             proxy_pass http://localhost:8080/;
            
             #告诉浏览器允许跨域访问的方法
             add_header Access-Control-Allow-Methods *;
             # 告诉浏览器缓存OPTIONS预检请求1小时
             add_header Access-Control-Max-Age 3600;
             #允许带有cookie访问
             add_header Access-Control-Allow-Credentials true;
             #注意 * 不能满足带有cookie的访问,Origin 必须是全匹配,这里通过变量获取
             add_header Access-Control-Allow-Origin $http_origin;
             #设置支持所有的自定义请求头
             add_header Access-Control-Allow-Headers $http_access_control_request_headers;
             #如果预检请求,则返回成功,不需要转发到后端
             if ($request_method = OPTIONS){
                 return 200;
             }
         }
 
方案6 客户端通过nginx隐藏跨域
 
#转发全部以/api开头的请求到web服务器
    location  /api
    {
         proxy_pass http://127.0.0.1:8080/api;
    }

版权声明：本文为博主原创文章，未经博主允许不得转载。
 
昨天一个开发找我帮忙配置一个nginx的转发，本来很容易的配置，但是坑了我好久才解决。。。需求大致是：
 
 
 
nginx上配有aaa.example.com的虚拟主机，现在需要将访问http://aaa.example.com/api/x.x/client/的请求转到http://bbb.example.com/api/x.x/client/，bbb.example.com的虚拟主机在另外一台nginx上，其中x.x表示位数不定的版本号，如：1.0或1.20.345都可能。请求转过去要求url保持不变
 
 
用rewrite转发的话，url会发生变化的，那就用proxy_pass吧，于是添加了如下的配置：
 
location ~ ^/api/([0-9]+)(\.[0-9]+)*/client/ {
    proxy_pass http://bbb.example.com;
} 
 
在现有环境的nginx里添加这段配置之后，访问却始终转不过去，查看nginx日志也只能看到是404信息，并没有更多定位问题的信息。检查了许久也没找到原因，于是重新装了一台新nginx，里面只加上面这段配置，结果nginx是能够转发成功的，这说明单独来看这条location的配置是没有问题的，很有可能是现有环境nginx里的某些配置影响到了这个转发。 
 为了定位问题原因，我将aaa.example.com虚拟主机下的其他配置注意注释掉来调试，最后发现当注释掉proxy_set_header Host $http_host ;这条配置之后，就能成功转发了。这才注意到是反向代理配置的问题。现有环境中原有的配置也不能随便删掉，上网查了下原因，找到下面这种解决方案：
 
location ~ ^/api/([0-9]+)(\.[0-9]+)*/client/ {
    proxy_pass http://bbb.example.com;
    proxy_set_header Host $proxy_host;
} 
 
即，在location里面添加一条proxy_set_header Host $proxy_host;配置。
 
当Host设置为$http_host时，则不改变请求头的值，所以当要转发到bbb.example.com的时候，请求头还是aaa.example.com的Host信息，就会有问题；当Host设置为$proxy_host时，则会重新设置请求头为bbb.example.com的Host信息。
 
另外，关于proxy_pass转发url的参数，可以通过在location中用rewrite来做，所以完善后的配置如下：
 
location ~ ^/api/([0-9]+)(\.[0-9]+)*/client/ {
    rewrite /(.*)$ /$1 break;
    proxy_pass http://bbb.example.com;
    proxy_set_header Host $proxy_host;
} 
 
在location用rewrite改变了URI之后，proxy_pass将使用改变后的URI。上面例子(.*)是将所有参数传给$1，转发时/$1会拼接在http://bbb.example.com后面。
 
补习
 
自己之前并没有太留意nginx中proxy_set_header的设置，借这次遇到的问题，补习下功课。
 
proxy_set_header用来重定义发往后端服务器的请求头。
 
 
 
语法格式： 
 proxy_set_header Field Value;
 
 
Value值可以是包含文本、变量或者它们的组合。常见的设置如： 
 proxy_set_header Host $proxy_host; 
 proxy_set_header X-Real-IP $remote_addr; 
 proxy_set_header X-Forwarded-For $remote_addr;
 
注意：在nginx的配置文件中，如果当前模块中没有proxy_set_header的设置，则会从上级别继承配置。继承顺序为：http, server, location。
 
参考资料： 
 1 proxy_set_header设置Host为$proxy_host，$host与$local_host的区别_a19860903的专栏-CSDN博客 
 2 《精通Nginx》— 第4章 Nginx作为反向代理

PHP header()函数用法
[codes=php]

 /*** Function: PHP header() examples (PHP)
** Desc: Some examples on how to use the header() function of PHPYou find a detailed tutorial at expertsrt.com (English) or at ffm.junetz.de (German).These is also a good help about caching at web-caching.com.
** Example: see below. <br/><br/><b>Tip:</b> You can use these sites to check your headers: <a href="http://web-sniffer.net/">web-sniffer.net</a>, <a href="http://www.delorie.com/web/headers.html">delorie.com</a> or <a href="http://www.forret.com/projects/analyze/">www.forret.com</a>.
** Author: Jonas John
*/
 
// fix 404 pages:
header('HTTP/1.1 200 OK');
 
// set 404 header:
header('HTTP/1.1 404 Not Found');
 
// set Moved Permanently header (good for redrictions)
// use with location header
header('HTTP/1.1 301 Moved Permanently');
 
// redirect to a new location:
header('Location: http://www.example.org/');
 
// redrict with delay:
header('Refresh: 10; url=http://www.example.org/');
print 'You will be redirected in 10 seconds';
 
// you could also use the HTML syntax:// <meta http-equiv="refresh" content="10;http://www.example.org/ />
 
// override X-Powered-By: PHP:
header('X-Powered-By: PHP/4.4.0');
header('X-Powered-By: Brain/0.6b');
 
// content language (en = English)
header('Content-language: en');
 
// last modified (good for caching)
$time = time() – 60; // or filemtime($fn), etc
header('Last-Modified: '.gmdate('D, d M Y H:i:s', $time).' GMT');
 
// header for telling the browser that the content
// did not get changed
header('HTTP/1.1 304 Not Modified');
 
// set content length (good for caching):
header('Content-Length: 1234');
 
// Headers for an download:
header('Content-Type: application/octet-stream');
header('Content-Disposition: attachment; filename="example.zip"');
header('Content-Transfer-Encoding: binary');
 
// load the file to send:readfile('example.zip');
// Disable caching of the current document:
header('Cache-Control: no-cache, no-store, max-age=0, must-revalidate');
header('Expires: Mon, 26 Jul 1997 05:00:00 GMT');
// Date in the pastheader('Pragma: no-cache');
// set content type:
header('Content-Type: text/html; charset=iso-8859-1');
header('Content-Type: text/html; charset=utf-8');
header('Content-Type: text/plain');
 
// plain text file
header('Content-Type: image/jpeg');
 
// JPG picture
header('Content-Type: application/zip');
 
// ZIP file
header('Content-Type: application/pdf');
 
// PDF file
header('Content-Type: audio/mpeg');
 
// Audio MPEG (MP3,…) file
header('Content-Type: application/x-shockwave-flash');
 
// Flash animation// show sign in box
header('HTTP/1.1 401 Unauthorized');
header('WWW-Authenticate: Basic realm="Top Secret"');
print 'Text that will be displayed if the user hits cancel or ';
print 'enters wrong login data';?>[/codes]
 
代码来自：http://codedump.jonasjohn.de/download/headers.txt
//下面是http://www.php.net/manual/en/function.header.php
的例子用于下载文件用
function dl_file($file){
 
//First, see if the file exists
if (!is_file($file)) { die(“404 File not found!“); }
 
//Gather relevent info about file
$len = filesize($file);
$filename = basename($file);
$file_extension = strtolower(substr(strrchr($filename,”.”),1));
 
//This will set the Content-Type to the appropriate setting for the file
switch( $file_extension ) {
case “pdf”: $ctype=”application/pdf”; break;
case “exe”: $ctype=”application/octet-stream”; break;
case “zip”: $ctype=”application/zip”; break;
case “doc”: $ctype=”application/msword”; break;
case “xls”: $ctype=”application/vnd.ms-excel”; break;
case “ppt”: $ctype=”application/vnd.ms-powerpoint”; break;
case “gif”: $ctype=”image/gif”; break;
case “png”: $ctype=”image/png”; break;
case “jpeg”:
case “jpg”: $ctype=”image/jpg”; break;
case “mp3″: $ctype=”audio/mpeg”; break;
case “wav”: $ctype=”audio/x-wav”; break;
case “mpeg”:
case “mpg”:
case “mpe”: $ctype=”video/mpeg”; break;
case “mov”: $ctype=”video/quicktime”; break;
case “avi”: $ctype=”video/x-msvideo”; break;
 
//The following are for extensions that shouldn’t be downloaded (sensitive stuff, like php files)
case “php”:
case “htm”:
case “html”:
case “txt”: die(“Cannot be used for “. $file_extension .” files!“); break;
 
default: $ctype=”application/force-download”;
}
 
//Begin writing headers
header(“Pragma: public”);
header(“Expires: 0″);
header(“Cache-Control: must-revalidate, post-check=0, pre-check=0″);
header(“Cache-Control: public”);
header(“Content-Description: File Transfer”);
 
//Use the switch-generated Content-Type
header(“Content-Type: $ctype”);
 
//Force the download
$header=”Content-Disposition: attachment; filename=”.$filename.”;”;
header($header );
header(“Content-Transfer-Encoding: binary”);
header(“Content-Length: “.$len);
@readfile($file);
exit;
}
 
http://www.wemaster.com.cn/blog/?p=53&cpage=1