nginx处理前端跨域问题 -详解 windows 和 mac 下的配置

发布时间：2022-08-19 13:05

什么是跨域？

通俗地讲，跨域就是由于前后端分离开发模式下，同一ip，同一域名，不同端口号，需要互相访问，需要cookie的传递以及数据的获取。一般在项目中，前后端完全分离，因此访问的端口号不同，比如：localhost：8090（前端）发送到localhost：8001（后端）请求数据，此时前后端就出现了

==跨域问题！ ==

如何解决跨域？

解决跨域的方法有很多，有其余4种方法虽然可以让前后端实现数据交互，但是cookie前后端还是不通，还是没有完全解决，后续我研究后出博客说明。

那我们现在讲解一种方法 nginx服务器反向代理访问，这个东西是可以完全解决。

nginx反向代理

windows具体步骤如下

1.1 下载

首先，自己安装好nginx，到nginx官网上下载相应的安装包，https://www.cnblogs.com/qfb620/p/5508468.html；

1.2 下载好后房放到D盘中某个目录下，解压出来即可

1.3 将自己的前端项目打包好放置在html目录下

1.4 修改conf文件夹下的nginx.conf文件

1.4 在该文件中加入如下配置

location /apis {
rewrite ^.+apis/?(.*)$ /$1 break;
include uwsgi_params;
proxy_pass http://localhost:8001;
}

重点配置如下！
其中/apis可以自己定义，这个相当于http://localhost:8001;在前端中请求的url中将http://localhost:8001修改为/apis，

当前端发送请求的时候，比如本来发送的url地址为http://localhost:8001/login,要使用nginx，就将url地址修改为/apis/login即可

上面配置中的proxy_pass 为自己的请求的后端域名或ip地址。

至此nginx配置完毕。

1.5 双击nginx.exe或者使用cmd到该目录使用start nginx.exe启动nginx，

并且，nginx.conf中listen为需要请求的端口号，自己可以根据需要修改

1.6 启动完毕，打开网址http://localhost:8888;即可访问自己的项目，完美解决跨域问题。

MAC具体步骤如下

反向代理的作用
①保护网站安全：任何来自Internet的请求都必须先经过代理服务器；

②通过配置缓存功能加速Web请求：可以缓存真实Web服务器上的某些静态资源，减轻真实Web服务器的负载压力；

③实现负载均衡：充当负载均衡服务器均衡地分发请求，平衡集群中各个服务器的负载压力；

1.1下载nginx

brew install nginx

这个据说是占的内存比较大，且下载时间长，我自己是mac，但没有下载，因为本身电脑内存不大（mac电脑太贵啦,555…），所以这里根据我的资料收集来给大家简单写下步骤。
配置的端口号为8282

开启后测试如下,

1.2配置nginx

mac下 nginx配置文件 ** /usr/local/etc/nginx/nginx.conf**

** vi /usr/local/etc/nginx/nginx.conf** 修改配置文件

 
#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       8282;
        server_name  localhost;#这里也可以填写自己的域名 或者服务器地址 比如104.224.166.36
 
        #charset koi8-r;
 
        #access_log  logs/host.access.log  main;
          # Load configuration files for the default server block.
        #include /etc/nginx/default.d/*.conf;
 
        location /proxy/ {
#             root    html/newdailian; #表示服务器文件根目录 项目放在此目录下面
#               if (!-e $request_filename) {
#                 rewrite  ^/index.php/(.*)$  /newdailian/index.php?s=$1  last;
#                 break;
# }
            proxy_pass http://tp5.test.com:7888 
            index  index.html index.htm index.php;
        }
        #打开这部分  
        error_page  404              /404.html;
 
        # redirect server error pages to the static page /50x.html
        #
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
 
        # proxy the PHP scripts to Apache listening on 127.0.0.1:80
        #
        #location ~ \.php$ {
        #    proxy_pass   http://127.0.0.1;
        #}
 
        # pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000
        #打开这部分配置
         # PHP 脚本请求全部转发到 FastCGI处理. 使用FastCGI协议默认配置.
        # Fastcgi服务器和程序(PHP,Python)沟通的协议.
 
        location ~ \.php$ {
           root           html;
           fastcgi_pass   127.0.0.1:9000;
           fastcgi_index  index.php;
           fastcgi_param  SCRIPT_FILENAME $document_root$fastcgi_script_name;
           include        fastcgi_params;
        }
 
        # deny access to .htaccess files, if Apache's document root
        # concurs with nginx's one
        #
        #location ~ /\.ht {
        #    deny  all;
        #}
    }
 
 
    # another virtual host using mix of IP-, name-, and port-based configuration
    #
    #server {
    #    listen       8000;
    #    listen       somename:8080;
    #    server_name  somename  alias  another.alias;
 
    #    location / {
    #        root   html;
    #        index  index.html index.htm;
    #    }
    #}
 
 
    # HTTPS server
    #
    #server {
    #    listen       443 ssl;
    #    server_name  localhost;
 
    #    ssl_certificate      cert.pem;
    #    ssl_certificate_key  cert.key;
 
    #    ssl_session_cache    shared:SSL:1m;
    #    ssl_session_timeout  5m;
 
    #    ssl_ciphers  HIGH:!aNULL:!MD5;
    #    ssl_prefer_server_ciphers  on;
 
    #    location / {
    #        root   html;
    #        index  index.html index.htm;
    #    }
    #}
    include servers/*;
}

mamp 开启nginx服务
 http://tp5.test.com:7888/index/goodsclass/classlist
失败了配置可能有问题,还要再看一下 ,由于工作,接下来在优化,再来看是怎么回事

今天接着来解决问题,尝试着将代理写一个其他的连接比如反向代理服务器设置为:

 server {
        listen       8282;
        server_name  localhost;#这里也可以填写自己的域名 或者服务器地址 比如104.224.166.36
 
        #charset koi8-r;
 
        #access_log  logs/host.access.log  main;
          # Load configuration files for the default server block.
        #include /etc/nginx/default.d/*.conf;
 
        location / {
            proxy_pass https://blog.csdn.net/resilient; 
        
        }

重启nginx,执行命令 nginx -s relaod

访问 localhost:8282

居然出现了界面,说明代理过去了,那么我tp5项目咋就代理不过去呢

再次来看,修改配置文件

 
    server {
        listen       8282;
        server_name  localhost;#这里也可以填写自己的域名 或者服务器地址 比如104.224.166.36
 
        #charset koi8-r;
 
        #access_log  logs/host.access.log  main;
          # Load configuration files for the default server block.
        #include /etc/nginx/default.d/*.conf;
 
        location / {
            proxy_pass http://tp5.test.com:7888/; 
        
        }