一、跨域访问
什么是跨域访问，当我们通过浏览器访问a网站时，同事会利用到ajax或其他方式，同时也请求b网站，这样的话就出现了请求一个页面，使用了两个域名，这种方式对浏览器来说默认是禁止的。
二、设置跨域访问
1.ngx_http_headers_module模块语法 Syntax: add_header name value [always]; Default: — Context: http, server, location, if in location COPY 2.nginx配置示例 location ~* \.html$ { add_header Access-Control-Allow-Origin *; # *指允许所有，也可指定，例如：http://10.0.0.56 add_header Access-Control-Allow-Methods GET,POST,PUT,DELETE,OPTIONS; }
三、模拟跨域访问
1.配置被跨域的网站
配置nginx
[root@web02 conf.d]# vim beikuayu.conf server { listen 80; server_name localhost; location / { root /code; index index.html; } }
保存后，重启nginx生效。
配置页面 [root@web02 ~]# echo "
我是被跨域网站
" > /code/index.html
2.配置跨域网站
配置nginx
[root@web01 conf.d]# vim kuayu.conf server { listen 80; server_name localhost; location / { root /code/kuayu; index index.html; } }
配置页面
[root@web01 ~]# mkdir /code/kuayu [root@web01 ~]# vim /code/kuayu/index.html <html lang="en"> <head> <meta charset="UTF-8" /> <title>测试ajax和跨域访问</title> <script src="https://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script> </head> <script type="text/javascript"> $(document).ready(function(){ $.ajax({ type: "GET", url: "http://10.0.0.57", success: function(data) { alert("successful! 跨域成功！"); }, error: function() { alert("fail! 跨域失败!"); } }); }); </script> <body> <h1>测试跨域访问</h1> </body> </html>
保存后，重启nginx生效。
3.配置允许跨域访问
[root@web02 conf.d]# vim beikuayu.conf server { listen 80; server_name localhost; root /code; index index.html; location ~* \.html$ { add_header Access-Control-Allow-Origin *; add_header Access-Control-Allow-Methods GET,POST,PUT,DELETE,OPTIONS; } }
4.Web页面展示
