62 Nginx跨域问题的案例演示

62.1 配置

# 下载 jQuery 到服务器
cd /usr/local/nginx/html
wget https://code.jquery.com/jquery-3.7.1.min.js -O jquery.js

[root@nginx-100 /usr/local/nginx/conf]# cat ../html/a.html 
<html>
  <head>
        <meta charset="utf-8">
        <title>跨域问题演示</title>
        <script src="jquery.js"></script>
        <script>
            $(function(){
                $("#btn").click(function(){
                        $.get('http://10.0.0.100:8080/getUser',function(data){
                                alert(JSON.stringify(data));
                        });
                });
            });
        </script>
  </head>
  <body>
        <input type="button" value="获取数据" id="btn"/>
  </body>
</html>
[root@nginx-100 /usr/local/nginx/conf]# cat nginx.conf
user www;
worker_processes 2;
error_log logs/error.log;
pid logs/nginx.pid;
#daemon on; # 默认on
events {
    accept_mutex on;
    multi_accept on;
    worker_connections  1024;
    use epoll;
}

http {
    include       mime.types;
    default_type  application/octet-stream;
    sendfile        on;
    tcp_nopush on;
    tcp_nodelay on;
    keepalive_timeout  65;
    include nginx_gzip.conf;

    # 模拟服务器a
    server {
        listen       80;
        server_name  localhost;
                
        location / {
          root html;
          index index.html index.htm;
        }
    }  
   # 模拟服务器b
    server {
        listen       8080;
        server_name  localhost;

        location /getUser {
           default_type application/json;
           return 200 '{"id":1,"name":"TOM","age":18}';
        }

        error_page   500 502 503 504 404 /50x.html;
        location = /50x.html {
            root   html;
        }
    }  
}
[root@nginx-100 /usr/local/nginx/conf]# nginx -t && nginx -s reload
nginx: the configuration file /usr/local/nginx/conf/nginx.conf syntax is ok
nginx: configuration file /usr/local/nginx/conf/nginx.conf test is successful

62.2 演示

浏览器访问：http://10.0.0.100/a.html

浏览器访问：http://10.0.0.100:8080/getUser

———————————————————————————————————————————————————————————————————————————

无敌小马爱学习

posted on 2026-05-18 22:47 马俊南阅读(3) 评论(0) 收藏举报