单机下Vue项目通过Nginx配置反向代理，2024年是意义非凡的一年

用户57923016702
46 阅读3分钟

跨域问题

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

出于浏览器的同源策略限制。同源策略（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开头的路径将会被‘'替换掉

*假如后台文档的接口是 "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 'remoteaddr−remote_addr - remote_user [timelocal]"time_local] "request" '

'statusstatus body_bytes_sent "$http_referer" '

'"httpuseragent""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 {

一开始应该是默认的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 'remoteaddr−remote_addr - remote_user [timelocal]"time_local] "request" '

'statusstatus body_bytes_sent "$http_referer" '

'"httpuseragent""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 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 uriuri 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 和 端口号都是在 上面的 配置文件里面的，而不是后

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

访问成功！

在这里插入图片描述

  1. 附录 —— 菜鸟的vim教程

  2. 参考 —— 关于Nginx的URL重写问题

最近新换了Mac，在新电脑上配了一下。

#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 {

算法

  1. 冒泡排序

  2. 选择排序

  3. 快速排序

  4. 二叉树查找: 最大值、最小值、固定值

  5. 二叉树遍历

  6. 二叉树的最大深度

  7. 给予链表中的任一节点，把它删除掉

  8. 链表倒叙

  9. 如何判断一个单链表有环

由于篇幅限制小编，pdf文档的详解资料太全面，细节内容实在太多啦，所以只把部分知识点截图出来粗略的介绍，每个小节点里面都有更细化的内容！

开源分享：docs.qq.com/doc/DSmRnRG…

avatar
文章
阅读
粉丝