单机下Vue项目通过Nginx配置反向代理(2)

跨域问题

====================================================================

出于浏览器的同源策略限制。同源策略（Sameoriginpolicy）是一种约定，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，则浏览器的正常功能可能都会受到影响。可以说Web是构建在同源策略基础之上的，浏览器只是针对同源策略的一种实现。同源策略会阻止一个域的javascript脚本和另外一个域的内容进行交互。所谓同源（即指在同一个域）就是两个页面具有相同的协议（protocol），主机（host）和端口号（port）

开发模式下

---

前端向后端请求数据时，需要解决跨域问题。

具体做法是在和src同级的地方新建一个 JavaScript文件，vue.config.js。

下面配置以下内容。

然后,前端使用axios请求的时候，形如'/api/login'

其中 /api被替换掉，最终请求的地址就是 http://localhost:8899/login。

module.exports={

devServer:{

proxy:{

“/api”:{

target:‘http://localhost:8899’,//访问的服务器地址

changeOrigin:true,//true为开启代理

//secure: true, // 如果是https接口，需要配置这个参数

pathRewrite:{

‘^/api’: ‘’//路径的替换规则

/*

*这里的配置是正则表达式，以/api开头的路径将会被‘'替换掉

*假如后台文档的接口是 “https://www.cyclv.com/admin/login”

*前端调取API接口应写：axios.get(‘/api/admin/login’)

*/

}

}

}

}

}

项目部署时

---

1. 打包项目： npm run build

2. 项目就多了一个文件夹：dist

但是部署的时候需要使用nginx做反向代理，因为开发的时候我们使用的是webpack提供的proxyTable做的代理从而解决了开发环境的跨域请求问题。

webpack实现代理请求的原理

用vim修改配置文件

==========================================================================

具体文件位置就要看安装在哪。

vim /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 - $remot{e}_{u}ser[$time_local] “$request” ’

'$status $bod{y}_{b}yte{s}_{s}ent"$http_referer" ’

‘“$htt{p}_{u}se{r}_{a}gent""$http_x_forwarded_for”’;

#access_log logs/access.log main;

sendfile on;

#tcp_nopush on;

#keepalive_timeout 0;

keepalive_timeout 65;

#gzip on;

server {

一开始应该是默认的8080端口

listen 7788;

server_name localhost;

#charset koi8-r;

#access_log logs/host.access.log main;

location / {

root html;

index index.html index.htm;

}

还有其他的一些配置……

这是单机版的Nginx，我们只需要做如下修改：

1. listen 配置自己的监听端口，可以是8080，8081 等等，随便你的;

2. server_name 配置你的服务名，比如taobao.com 等等，这里是本机的，也可以配置IP地址;

3. root 你项目的根目录地址,这里就是刚才npm run build得到的dist文件夹;

4. 设置代理需要重写/api,因为在开发的时候所有的接口都是以/api开头的，所以在请求代理的时候和proxyTable一样的逻辑，需要rewrite重写(格式是正则表达式)。

location /api {

rewrite ^.+api/?(.*)$ /$1 break; # url重写

proxy_pass http://localhost:8899; # 代理过去的目标地址

proxy_redirect off;

proxy_set_header Host $host;

proxy_set_header X-Real-IP $remote_addr;

proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;

}

最终的配置文件:

#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 - $remot{e}_{u}ser[$time_local] “$request” ’

'$status $bod{y}_{b}yte{s}_{s}ent"$http_referer" ’

‘“$htt{p}_{u}se{r}_{a}gent""$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 7788;

服务器名

server_name localhost;

前端项目根目录

root /Users/mac/WebstormProjects/sims/dist;

#charset koi8-r;

#access_log logs/host.access.log main;

#location / {

root html;

index index.html index.htm;

#}

#location / {

try_files $uri $uri/ /index.html;

#}

前端项目中的/api重写

location /api {

rewrite ^.+api/?(.*)$ /$1 break;

proxy_pass http://localhost:8899;

proxy_redirect off;

proxy_set_header Host $host;

proxy_set_header X-Real-IP $remote_addr;

proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;

}

#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

#location ~ .php$ {

root html;

fastcgi_pass 127.0.0.1:9000;

fastcgi_index index.php;

fastcgi_param SCRIPT_FILENAME /scripts$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/*;

}

检查是否成功

======================================================================

在本机运行后台项目（我这里的是SpringBoot项目）。

然后在浏览器上访问，注意是serve_name 和 端口号都是在 上面的 配置文件里面的，而不是后

端的端口号，这就实现了真正服务地址的隐藏，这也正是所谓的反向代理！

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则几千的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！

因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上前端开发知识点，真正体系化！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！

如果你觉得这些内容对你有帮助，可以扫码获取！！（备注：前端）

最后

今天的文章可谓是积蓄了我这几年来的应聘和面试经历总结出来的经验，干货满满呀！如果你能够一直坚持看到这儿，那么首先我还是十分佩服你的毅力的。不过光是看完而不去付出行动，或者直接进入你的收藏夹里吃灰，那么我写这篇文章就没多大意义了。所以看完之后，还是多多行动起来吧！

可以非常负责地说，如果你能够坚持把我上面列举的内容都一个不拉地看完并且全部消化为自己的知识的话，那么你就至少已经达到了中级开发工程师以上的水平，进入大厂技术这块是基本没有什么问题的了。

外链图片转存中…(img-ZT6E8nDQ-1713732409789)]

[外链图片转存中…(img-NgFMrB4Q-1713732409790)]

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上前端开发知识点，真正体系化！

[外链图片转存中…(img-yF8qu25h-1713732409790)]

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！

如果你觉得这些内容对你有帮助，可以扫码获取！！（备注：前端）

[外链图片转存中…(img-la1P8xFV-1713732409791)]

最后

今天的文章可谓是积蓄了我这几年来的应聘和面试经历总结出来的经验，干货满满呀！如果你能够一直坚持看到这儿，那么首先我还是十分佩服你的毅力的。不过光是看完而不去付出行动，或者直接进入你的收藏夹里吃灰，那么我写这篇文章就没多大意义了。所以看完之后，还是多多行动起来吧！

可以非常负责地说，如果你能够坚持把我上面列举的内容都一个不拉地看完并且全部消化为自己的知识的话，那么你就至少已经达到了中级开发工程师以上的水平，进入大厂技术这块是基本没有什么问题的了。

资料领取方式：戳这里前往免费领取