nginx解决ajax前端跨域问题(多个跨域)

最新推荐文章于 2024-12-04 19:55:26 发布

置顶周达

最新推荐文章于 2024-12-04 19:55:26 发布

阅读量1.3k

点赞数 2

CC 4.0 BY-SA版权

分类专栏： ajax 文章标签： nginx ajax跨域多个跨域

本文链接：https://blog.youkuaiyun.com/gis_zhouda/article/details/85263652

ajax 专栏收录该内容

1 篇文章

订阅专栏

本文介绍如何通过配置Nginx服务器解决前端ajax调用跨域问题，详细展示了Nginx配置文件的修改过程，包括添加跨域请求头、设置代理服务器等关键步骤。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近项目中遇到了一个问题，要在前端用ajax调用另一个平台的服务展示数据，但是服务不支持跨域。于是，就想用nginx解决下，网上的方案很多，下载了nginx最新版，修改默认的配置文件。。。如下


#user  nobody;
worker_processes  1;

#error_log  logs/error.log;
#error_log  logs/error.log  notice;
#error_log  logs/error.log  info;

#pid        logs/nginx.pid;


events {
    worker_connections  1024;
}


http {
    include       mime.types;
    default_type  application/octet-stream;

    #log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
    #                  '$status $body_bytes_sent "$http_referer" '
    #                  '"$http_user_agent" "$http_x_forwarded_for"';

    #access_log  logs/access.log  main;

    sendfile        on;
    #tcp_nopush     on;

    #keepalive_timeout  0;
    keepalive_timeout  65;

    #gzip  on;

    server {
        listen       8083;
        server_name  localhost;
        add_header Access-Control-Allow-Origin *;  # 允许跨域
        #charset koi8-r;

        #access_log  logs/host.access.log  main;
		
		location /devices/ {
		    add_header 'Access-Control-Allow-Origin' '*';
            add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
            add_header 'Access-Control-Allow-Headers' '*';
            add_header 'Access-Control-Expose-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Content-Range,Range';
		    proxy_pass http://api.heclouds.com;
		}
    }

}

设置端口号8083，测试地址在本地设为localhost，/devices/为ajaxurl中要匹配的关键字，http://api.heclouds.com实际要访问的地址。

很自信，没有问题，在本地运行程序测试。。。

尼玛。。。还是报错，但是在浏览器直接访问nginx地址是可以跨域访问的，原来系统的运行地址localhost:13217和nginx访问地址localhost:8083也是跨域的

在nginx配置文件中要增加系统运行地址的跨域配置，其中/xxxxx/为系统运行地址中匹配的关键字，http//localhost:13217 为系统运行实际地址


#user  nobody;
worker_processes  1;

#error_log  logs/error.log;
#error_log  logs/error.log  notice;
#error_log  logs/error.log  info;

#pid        logs/nginx.pid;


events {
    worker_connections  1024;
}


http {
    include       mime.types;
    default_type  application/octet-stream;

    #log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
    #                  '$status $body_bytes_sent "$http_referer" '
    #                  '"$http_user_agent" "$http_x_forwarded_for"';

    #access_log  logs/access.log  main;

    sendfile        on;
    #tcp_nopush     on;

    #keepalive_timeout  0;
    keepalive_timeout  65;

    #gzip  on;

    server {
        listen       8083;
        server_name  localhost;
        add_header Access-Control-Allow-Origin *;  # 允许跨域
        #charset koi8-r;

        #access_log  logs/host.access.log  main;
		
        #onenet
		location /devices/ {
		    add_header 'Access-Control-Allow-Origin' '*';
            add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
            add_header 'Access-Control-Allow-Headers' '*';
            add_header 'Access-Control-Expose-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Content-Range,Range';
		    proxy_pass http://api.heclouds.com;
		}
		location /xxxxx/ {
		    add_header 'Access-Control-Allow-Origin' '*';
            add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
            add_header 'Access-Control-Allow-Headers' '*';
            add_header 'Access-Control-Expose-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Content-Range,Range';
		    proxy_pass http://localhost:13217;
		}

    }

}

系统访问的入口为nginx的地址localhost:8083/xxxxx/