Nginx 解决跨域问题

浏览器有同源访问策略，经常遇到跨域问题，怎么破？
解决方案：
一般Nginx解决跨域问题有2种方式，一般用第一种，接下来也是主讲第一种。

【推荐】a.通过配置 header方式解决跨域 ;
b.通过反向代理 proxy_pass;

a
修改nginx server 配置，添加如下内容

#允许跨域请求的域，* 代表所有
add_header 'Access-Control-Allow-Origin' *;
#允许请求的header
add_header 'Access-Control-Allow-Headers' *;
#允许带上cookie请求
add_header 'Access-Control-Allow-Credentials' 'true';
#允许请求的方法，比如 GET,POST,PUT,DELETE
add_header 'Access-Control-Allow-Methods' *;

添加完成以上配置，重启Nginx就会发现，可以正常访问了。

PS ：若考虑到安全性，也可以指定访问来源请求的域，示例：

add_header 'Access-Control-Allow-Origin' 'http://test1.xqiangme.top';

附带nginx.conf

user root;
#user  nobody;

worker_processes  8; #对外提供web服务时的worker进程数，设置为可用的CPU内核数，auto是自动检测
worker_rlimit_nofile 100000;  #worker进程的最大打开文件数限制

events {
    worker_connections  1024; #设置可由一个worker进程同时打开的最大连接数
	multi_accept on; #新连接通知后接受尽可能多的连接
    use epoll; #设置用于复用客户端线程的轮询方法
}

http {
	server_tokens off; #关闭在错误页面中的nginx版本数字，安全性
	sendfile on; #将数据从磁盘读到OS缓存
	tcp_nopush on; #数据包里发送所有头文件，而不一个接一个的发送
    tcp_nodelay on; #不要缓存数据，而是一段一段的发送
	access_log off; #设置nginx是否将存储访问日志。关闭这个选项可以让读取磁盘IO操作更快
	error_log /usr/local/nginx/error.log crit; #记录错误日志
	
	keepalive_timeout 10; #给客户端分配keep-alive链接超时时间
	client_header_timeout 10; #设置请求头的超时时间
	client_body_timeout 10; #设置请求体的超时时间
	reset_timedout_connection on; #关闭不响应的客户端连接
	send_timeout 10; #指定客户端的响应超时时间
	
	limit_conn_zone $binary_remote_addr zone=addr:5m; #设置用于保存各种key（比如当前连接数）的共享内存的参数
	limit_conn addr 100; #为给定的key设置最大连接数，允许每一个IP地址最多同时打开有100个连接
	
    include       mime.types; #加载稍后会用到的一系列的MIME类型。
    default_type  application/octet-stream; #设置文件使用的默认的MIME-type。
	charset UTF-8; #设置头文件中的默认的字符集
	
	gzip on; #采用gzip压缩的形式发送数据
	gzip_disable "msie6"; #不使用gzip IE6
	gzip_min_length 100k; #gzip压缩最小文件大小，超出进行压缩（自行调节）
	gzip_buffers 4 16k; #buffer 不用修改
	gzip_comp_level 3; #压缩级别:1-10，数字越大压缩的越好，时间也越长
	gzip_types text/plain application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png; #  压缩文件类型
	gzip_vary off;  #跟Squid等缓存服务有关，on的话会在Header里增加 "Vary: Accept-Encoding"
	
	open_file_cache max=100000 inactive=20s; #打开缓存的同时也指定了缓存最大数目，以及缓存的时间
    open_file_cache_valid 30s; #在open_file_cache中指定检测正确信息的间隔时间。
    open_file_cache_min_uses 2; # 定义了open_file_cache中指令参数不活动时间期间里最小的文件数。
    open_file_cache_errors on; #指定了当搜索一个文件时是否缓存错误信息
	
	upstream webservers {
		server 192.168.1.165 weight=3; # 负载设置，权重最大优先访问，其他默认都是1
		#server 192.168.1.166:8080 max_fails=3 fail_timout=30s; #如果在30s内连续三次产生3次失败，就认为这个服务器在之后的30s是无效(down)状态
		#server 192.168.1.17   backup;   #备用服务器	
	}

   server {
		listen 8098;      
		server_name localhost;               
		autoindex on; #Nginx默认是不允许列出整个目录       
		charset utf-8; #设置字符集
		client_max_body_size 10M; #设置nginx服务允许用户最大上传数据大小,根据业务需求调整

		location ^~/api {
			add_header access-control-allow-origin *;
			proxy_pass      http://webservers;
			proxy_set_header X-Forwarded-Host $host:$server_port;
			proxy_set_header  X-Real-IP  $remote_addr;
			proxy_set_header    Origin        $host:$server_port;
			proxy_set_header    Referer       $host:$server_port;
			rewrite ^/api/(.*)$ /$1 break;
          
		}

		location / {
			try_files $uri $uri/ /index.html;
			add_header access-control-allow-origin *;
			root /usr/local/deploy/zkpt-ywzc-front; # 前端代码绝对路径
		}   

        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
  
    }  

}

遇到的问题：
1、有同学遇到这种情况：直接访问链接，可以正常访问登录，但通过nginx代理访问，就会出现空白页面，也不报错。
究其原因：因为用了前后端分离框架，导致前端访问部分路径失效，页面无法正常显示。
解决方案：给访问链接添加前缀，与nginx的配置相同即可