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

什么是跨域？通俗地讲，跨域就是由于前后端分离开发模式下，同一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盘中某个目录下，解压出来即可 【前端|nginx处理前端跨域问题 -详解 windows 和 mac 下的配置】
文章图片

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** 修改配置文件

#usernobody; worker_processes1; #error_loglogs/error.log; #error_loglogs/error.lognotice; #error_loglogs/error.loginfo; #pidlogs/nginx.pid; events { worker_connections1024; } http { includemime.types; default_typeapplication/octet-stream; #log_formatmain'$remote_addr - $remote_user [$time_local] "$request" ' #'$status $body_bytes_sent "$http_referer" ' #'"$http_user_agent" "$http_x_forwarded_for"'; #access_loglogs/access.logmain; sendfileon; #tcp_nopushon; #keepalive_timeout0; keepalive_timeout65; #gzipon; server { listen8282; server_namelocalhost; #这里也可以填写自己的域名或者服务器地址比如104.224.166.36 #charset koi8-r; #access_loglogs/host.access.logmain; # Load configuration files for the default server block. #include /etc/nginx/default.d/*.conf; location /proxy/ { #roothtml/newdailian; #表示服务器文件根目录项目放在此目录下面 #if (!-e $request_filename) { #rewrite^/index.php/(.*)$/newdailian/index.php?s=$1last; #break; # } proxy_pass http://tp5.test.com:7888 indexindex.html index.htm index.php; } #打开这部分 error_page404/404.html; # redirect server error pages to the static page /50x.html # error_page500 502 503 504/50x.html; location = /50x.html { roothtml; } # proxy the PHP scripts to Apache listening on 127.0.0.1:80 # #location ~ \.php$ { #proxy_passhttp://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$ { roothtml; fastcgi_pass127.0.0.1:9000; fastcgi_indexindex.php; fastcgi_paramSCRIPT_FILENAME $document_root$fastcgi_script_name; includefastcgi_params; } # deny access to .htaccess files, if Apache's document root # concurs with nginx's one # #location ~ /\.ht { #denyall; #} } # another virtual host using mix of IP-, name-, and port-based configuration # #server { #listen8000; #listensomename:8080; #server_namesomenamealiasanother.alias; #location / { #roothtml; #indexindex.html index.htm; #} #} # HTTPS server # #server { #listen443 ssl; #server_namelocalhost; #ssl_certificatecert.pem; #ssl_certificate_keycert.key; #ssl_session_cacheshared:SSL:1m; #ssl_session_timeout5m; #ssl_ciphersHIGH:!aNULL:!MD5; #ssl_prefer_server_cipherson; #location / { #roothtml; #indexindex.html index.htm; #} #} include servers/*; }

mamp 开启nginx服务

文章图片

文章图片
http://tp5.test.com:7888/index/goodsclass/classlist

文章图片
失败了配置可能有问题,还要再看一下 ,由于工作,接下来在优化,再来看是怎么回事

文章图片

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

server { listen8282; server_namelocalhost; #这里也可以填写自己的域名或者服务器地址比如104.224.166.36 #charset koi8-r; #access_loglogs/host.access.logmain; # 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 { listen8282; server_namelocalhost; #这里也可以填写自己的域名或者服务器地址比如104.224.166.36 #charset koi8-r; #access_loglogs/host.access.logmain; # Load configuration files for the default server block. #include /etc/nginx/default.d/*.conf; location / { proxy_pass http://tp5.test.com:7888/; }

http://localhost:8282/index/goodsclass/classlist