问题解决1:nginx反向代理丢失js、css问题

html-css041

问题解决1:nginx反向代理丢失js、css问题,第1张

对于新版本的vue,需要新增vue.config.js,并添加如下配置,产生的效果是一样的

其实用 相对路径 来解决这个问题不是最好的方案,甚至 vue-cli4.x 之后,就不支持将 publicPath 设置为 ./ 了。

看了 公司的项目 及 Nuxt框架 的推荐,均是推荐使用绝对路径来设置 publicPath

1. 最简反向代理配置

在http节点下,使用upstream配置服务地址,使用server的location配置代理映射。

upstream my_server {

server 10.0.0.2:8080

keepalive 2000

}

server {

listen 80

server_name 10.0.0.1

client_max_body_size 1024M

location /my/ {

proxy_pass http://my_server/

proxy_set_header Host $host:$server_port

}

}

通过该配置,访问nginx地址http://10.0.0.1:80/my的请求会被转发到my_server服务地址http://10.0.0.2:8080/。

需要注意的是,如果按照如下配置:

upstream my_server {

server 10.0.0.2:8080

keepalive 2000

}

server {

listen 80

server_name 10.0.0.1

client_max_body_size 1024M

location /my/ {

proxy_pass http://my_server

proxy_set_header Host $host:$server_port

}

}

那么,访问nginx地址http://10.0.0.1:80/my的请求会被转发到my_server服务地址http://10.0.0.2:8080/my。这是因为proxy_pass参数中如果不包含url的路径,则会将location的pattern识别的路径作为绝对路径。

2. 重定向报文代理

即便配置了nginx代理,当服务返回重定向报文时(http code为301或302),会将重定向的目标url地址放入http response报文的header的location字段内。用户浏览器收到重定向报文时,会解析出该字段并作跳转。此时新的请求报文将直接发送给服务地址,而非nginx地址。为了能让nginx拦截此类请求,必须修改重定向报文的location信息。

location /my/ {

proxy_pass http://my_server

proxy_set_header Host $host:$server_port

proxy_redirect / /my/

}

使用proxy_redirect可以修改重定向报文的location字段,例子中会将所有的根路径下的url代理到nginx的/my/路径下返回给用户。比如服务返回的重定向报文的location原始值为/login,那么经过nginx代理后,用户收到的报文的location字段为/my/login。此时,浏览器将会跳转到nginx的/my/login地址进行访问。

需要注意的是,服务返回的重定向报文的location字段有时会填写绝对路径(包含服务的ip/域名和端口),有时候会填写相对路径,此时需要根据实际情况进行甄别。

location /my/ {

proxy_pass http://my_server

proxy_set_header Host $host:$server_port

proxy_redirect http://my_server/ http://$host:$server_port/my/

}

上述配置便是将my_server服务的根路径下的所有路径代理到nginx地址的/my/路径下。当nginx配置只有一个server时,http://$host:$server_port前缀可以省略。

3. 报文数据替换

使用nginx代理最牛(dan)逼(sui)的情况就是http响应报文内写死了服务地址或web绝对路径。写死服务地址的情况比较少见,但也偶尔存在。最棘手的是写死了web绝对路径,尤其是绝对路径都没有公共前缀。举个例子来说:

一般的web页面会包含如下类似路径:

/public:用于静态页面资源,如js脚本/public/js,样式表/public/css,图片/public/img等。

/static:和/public类似。

/api:用于后台服务API接口。

/login:用于登录验证。

其他。

对于这样的服务,可能的代理配置如下:

location /my/ {

proxy_pass http://my_server/

proxy_set_header Host $host:$server_port

proxy_redirect / /my/

}

location /login/ {

proxy_pass http://my_server/public

proxy_set_header Host $host:$server_port

}

location /public/ {

proxy_pass http://my_server/public

proxy_set_header Host $host:$server_port

}

location /api/ {

proxy_pass http://my_server/api

proxy_set_header Host $host:$server_port

}

由于web页面或静态资源内写死了类似的绝对路径,那么对于用户来说,通过页面内的链接进行跳转时,都会请求到nginx服务对应的路径上。一旦存在另一个服务也包含类似的路径,也需要nginx进行代理,那么矛盾就出现了:访问nginx的同一个路径下的请求究竟转发给哪一个服务?

要解决这个问题,必须在用户收到报文前,将报文的数据中包含的绝对路径都添加统一的前缀,如/my/public,/my/api,/my/login,这样nginx代理配置则可以简化为:

location /my/ {

proxy_pass http://my_server/

proxy_set_header Host $host:$server_port

proxy_redirect / /my/

}

location /other/ {

proxy_pass http://other_server/

proxy_set_header Host $host:$server_port

proxy_redirect / /other/

}

nginx的ngx_http_sub_module模块提供了类似的报文数据替换功能,该模块默认不会安装,需要在编译nginx时添加--with-http_sub_module参数,或者直接下载nginx的rpm包。

使用sub_filter对数据包进行替换的语法如下:

location /my/ {

proxy_pass http://my_server/

proxy_set_header Host $host:$server_port

sub_filter 'href="/' 'href="/my/'

sub_filter 'src="/' 'src="/my/'

sub_filter_types text/html

sub_filter_once off

}

上述配置会将/my/下的所有响应报文内容的href="/替换为href="/my,以及src="/替换为src="/my,即为所有的绝对路径添加公共前缀。

注意,如果需要配置多个sub_filter,必须保证nginx是1.9.4版本之上的。

您好,nginx服务器SSL证书配置如下,请你自查,下面是用的沃通SSL测试证书,你可要申请沃通免费SSL证书用。

打开 Nginx 安装目录下 conf 目录中的 nginx.conf 文件找到

# HTTPS server

#

#server {

# listen 443

# server_name localhost

# ssl on

# ssl_certificate cert.pem

# ssl_certificate_key cert.key

# ssl_session_timeout 5m

# ssl_protocols SSLv2 SSLv3 TLSv1

# ssl_ciphers ALL:!ADH:!EXPORT56:RC4+RSA:+HIGH:+MEDIUM:+LOW:+SSLv2:+EXP

# ssl_prefer_server_ciphers on

# location / {

# root html

# index index.html index.htm

# }

#}

将其修改为 :

server {

listen 443

server_name localhost

ssl on

ssl_certificate sslkey/wosign.com.crt(证书公钥)

ssl_certificate_key sslkey/wosign.com.key(证书私钥)

ssl_session_timeout 5m

ssl_protocols TLSv1 TLSv1.1 TLSv1.2

ssl_ciphers ALL:!ADH:!EXPORT56:-RC4+RSA:+HIGH:+MEDIUM:!EXP

ssl_prefer_server_ciphers on

location / {

root html

index index.html index.htm

}

}

保存退出,并重启 Nginx。通过 https 方式访问您的站点,测试站点证书的安装配置。