nginx 配置跨域 status code 200,但是报错CORS error,实际还是跨域了

原文链接:https://blog.csdn.net/m0_46496355/article/details/123706879

昨天才完成的ubuntu通过nginx发布vue线上项目
结果今天调试后台接口的时候就出现了跨域问题,由于线上是在同一个域名下,所以在线上项目中调用接口的时候不会出现跨域问题,主要的就是本地调试的时候出现了跨域问题;

解决方法:
在nginx配置中加上这一段配置

add_header Access-Control-Allow-Methods ''; 
add_header Access-Control-Max-Age 3600; 
add_header Access-Control-Allow-Credentials true; 
add_header Access-Control-Allow-Origin '';
add_header Access-Control-Allow-Headers $http_access_control_request_headers always;
 if ($request_method = OPTIONS) {
     return 200;
 }
 // 在server下的location中配置

配置完记得重启一下
这时候已经可以访问了,但是调用接口的时候会发现,在network中status code返回的是200,但是state显示的是CORS error。如下

这是为什么,我不理解~~
这时候其实nginx中已经配置成功了。
经过不断咨询度娘之后,看到了一个比较可信的原因:浏览器的js引擎解析的时候也是遵循同源策略的,由于本地浏览器地址跟访问的地址不在同一个域名下,所以返回了跨域的错误。
知道原因就比较简单了,可以参考我前面的文章前后端本地联调跨域,虽然已经不是本地联调了,但是使用的方法是一样的,利用proxy代理转发来骗过浏览器。
按照前后端本地联调跨域配置完成proxy代理之后,再去访问就可以了。

正式项目是不应该配置Access-Control-Allow-Methods ‘*’的,不安全,因为不管是谁配置个proxy都能访问到你的接口了,并且关于上面的nginx配置我也没有解释,解释了也是误导读者,因为我对其中的概念也比较模糊,目前正在探索学习中,需要深入了解的请自行百度,O(∩_∩)O哈哈哈~

每天分享一个踩坑经历~~~

Nginx配置使用详解

原文链接:https://blog.csdn.net/qq_46312987/article/details/118895520

1、常用命令
需要进入nginx的安装目录中的sbin目录(也可以配置环境变量,在任何目录都可以执行下面的命令),里面有一个nginx脚本文件

1、启动nginx
./nginx
2、关闭nginx
./nginx -s stop
3、重新加载nginx (nginx.conf)
./nginx -s reload
4、查看版本号
./nginx -v

2、Nginx配置文件(nginx.conf)
2.1概述
默认在Linux上安装的Nginx,配置文件在安装的nginx目录下的conf目录下,名字叫做nginx.conf

nginx.conf主要由三部分组成

全局块,
events块
http块
2.2配置文件结构

2.3真实配置文件概览

# 全局快

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块

events {
worker_connections 1024;
}

http块

http {
——————————————————————————# 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块

server {

server全局块

    listen       80;
    server_name  localhost;

    #charset koi8-r;

    #access_log  logs/host.access.log  main;

location块

    location / {
        root   html;
        index  index.html index.htm;
    }

    #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;
    #}

}

可以配置多个server块

2.2全局块
就是配置文件从头开始到events块之间的内容,主要设置的是影响nginx服务器整体运行的配置指令比如worker_process, 值越大,可以支持的并发处理量也越多,但是还是和服务器的硬件相关

2.3events块
events 块涉及的指令主要影响 Nginx 服务器与用户的网络连接,常用的设置包括是否开启对多 work process下的网络连接进行序列化,是否允许同时接收多个网络连接,选取哪种事件驱动模型来处理连接请求,每个 word process 可以同时支持的最大连接数等。

上述例子就表示每个 work process 支持的最大连接数为 1024.
这部分的配置对 Nginx 的性能影响较大,在实际中应该灵活配置

2.4http块
包括http全局块,以及多个server块

2.4.1http全局块
http 全局块配置的指令包括文件引入、 MIME-TYPE 定义、日志自定义、连接超时时间、单链接请求数上限等。

2.4.2server块
这块和虚拟主机有密切关系,虚拟主机从用户角度看,和一台独立的硬件主机是完全一样的,该技术的产生是为了节省互联网服务器硬件成本。
每个 http 块可以包括多个 server 块,而每个 server 块就相当于一个虚拟主机
而每个 server 块也分为全局 server 块,以及可以同时包含多个 location 块。
2.4.2.1server全局块
最常见的配置是本虚拟机主机的监听配置和本虚拟主机的名称或 IP 配置。

#这一行表示这个server块监听的端口是80,只要有请求访问了80端口,此server块就处理请求

listen 80;
# 表示这个server块代表的虚拟主机的名字
server_name localhost;
1
2
3
4
2.4.2.2location块
一个 server 块可以配置多个 location 块。
主要作用是根据请求地址路径的匹配,匹配成功进行特定的处理
这块的主要作用是基于 Nginx 服务器接收到的请求字符串(例如 server_name/uri-string),对虚拟主机名称(也可以是 IP 别名)之外的字符串(例如 前面的 /uri-string)进行匹配,对特定的请求进行处理。地址定向、数据缓存和应答控制等功能,还有许多第三方模块的配置也在这里进行。

表示如果请求路径是/就是用这个location块进行处理

location / {
root html;
index index.html index.htm;
}
1
2
3
4
5
3、反向代理
3.1正向代理与反向代理概述
3.1.1正向代理
正向代理代理的是客户端,需要在客户端配置,我们访问的还是真实的服务器地址

3.1.2反向代理
反向代理代理的是服务器端,客户端不需要任何配置,客户端只需要将请求发送给反向代理服务器即可,代理服务器将请求分发给真实的服务器,获取数据后将数据转发给你。隐藏了真实服务器,有点像网关。

3.1.3区别与总结
正向代理与反向代理的区别

最根本的区别是代理的对象不同

正向代理代理的是客户端,需要为每一个客户端都做一个代理服务器,客户端访问的路径是目标服务器
反向代理代理的是真实服务器,客户端不需要做任何的配置,访问的路径是代理服务器,由代理服务器将请求转发到真实服务器
3.2配置
3.2.1应用一
实现效果访问http://192.168.80.102:80(Nginx首页),最终代理到http://192.168.80.102:8080(Tomcat首页)

首先启动一台Tomcat服务器(已经安装了Tomcat)

进入Tomcat的安装目录下的bin目录下,使用./startup.sh命令,启动Tomcat

在Nginx的配置文件中进行配置

1、新建一个server块,在server全局块中配置监听80端口

2、在location块中配置 / 路径请求代理到tomcat的地址

下面三个配置的含义就是 ,当访问Linux的http://192.168.80.102:80这个地址时,由于配置Nginx监听的是80端口,所以会进入这个server块进行处理,然后看你的访问路径,根据location块配置的不同路径进入对应的处理,由于配置了/请求,所以进入/的location处理,然后配置了proxy_pass,所以进行代理到指定的路径。

server {

监听端口80 即当访问服务器的端口是80时,进入这个server块处理

    listen       80;

server_name当配置了listen时不起作用

    server_name  localhost;

location后面代表访问路径 当是/ 请求时 代理到tomcat的地址

    location / {

使用 proxy_pass(固定写法)后面跟要代理服务器地址

        proxy_pass http://192.168.80.102:8080;
    }

}

经过测试,当输入http://192.168.80.102:80时,Nginx给我们代理到了Tomcat,所以显示了Tomcat的页面,即配置成功

3.2.2应用二
应用一访问的是/路径,给我们代理到指定的服务器

应用二实现:

让Nginx监听9001端口
我们实现当访问http://192.168.80.102:9001/edu(Nginx地址)时,nginx给我们代理到http://192.168.80.102:8081,
当访问http://192.168.80.102:9001/vod时,nginx给我们代理到http://192.168.80.102:8082
启动两个Tomcat服务器

端口分别是8081和8082,
在8001的服务器的webapps下创建一个edu目录,编写一个test.html
在8002的服务器的webapps下创建一个vod目录,编写一个test.html
由于虚拟机的ip是192.168.80.102,所以保证访问http://192.168.80.102:8081/edu/test.html和http://192.168.80.102:8082/vod/test.html 都可以成功访问

编写Nginx配置文件

server {

监听9001端口

    listen       9001;

进行路径匹配,匹配到edu代理到8081

    location ~/edu/ {
        proxy_pass http://192.168.80.102:8081;
    }

进行路径匹配,匹配到vod代理到8082

    location ~/vod/ {
        proxy_pass http://192.168.80.102:8082;
    }

}

经过测试,访问成功!!!

3.3location详解

3.4server_name作用及访问流程
客户端通过域名访问服务器时会将域名与被解析的ip一同放在请求中。当请求到了nginx中时。nginx会先去匹配ip,如果listen中没有找到对应的ip,就会通过域名进行匹配,匹配成功以后,再匹配端口。当这三步完成,就会找到对应的server的location对应的资源。

CSDN

4、负载均衡
4.1概述
简单来说就是使用分布式的场景,将原先的一台服务器做成一个集群,然后将请求分发到各个服务器上,但是,如何将请求每次转发到不同的服务器呢,Nginx就可以做到。原来我们都是直接访问服务器,现在我们可以使用Nginx进行反向代理,然后我们访问Nginx,由Nginx将我们的请求分发到不同的服务器上,以实现负载均衡

4.2配置
实现:

访问http://192.168.80.102:80/edu/test.html,Nginx将请求分配到8081和8082两台tomcat服务器上。

1、开启两台tomcat

分别在webapps下的edu下编写一个test.html,文件内容可以不一致,为了明显看到负载均衡的效果

2、配置文件

在http块中的全局块中配置

upstream固定写法 后面的myserver可以自定义

upstream myserver{
server 192.168.80.102:8081;
server 192.168.80.102:8082;
}

server配置

server {
  # 监听80端口
    listen 80;   
    #location块
    location / {

反向代理到上面的两台服务器 写上自定义的名称

    proxy_pass http://myserver;
    }
}


访问http://192.168.80.102:80/edu/test.html时,可以分发到8081和8082两台服务器,测试成功

4.3负载均衡规则
4.3.1轮询(默认)
每个请求按时间顺序逐一分配到不同的后端服务器,如果后端服务器 down 掉,能自动剔除

4.3.2weight权重
weight 代表权重默认为 1,权重越高被分配的客户端越多

upstream myserver {
server 192.168.80.102:8081 weight=1 ;
server 192.168.80.102:8082 weight=2 ;
}
server {
listen 80;
location / {
proxy_pass http://myserver;
}

4.3.3ip_hash
每个请求按访问 ip 的 hash 结果分配,这样每个访客固定访问一个后端服务器,可以解决session问题

配置负载均衡的服务器和端口

upstream myserver {
server 192.168.80.102:8081;
server 192.168.80.102:8082;
ip_hash;
}
server {
listen 80;
location / {
proxy_pass http://myserver;
}
}

4.3.4fair
按后端服务器的响应时间来分配请求,响应时间短的优先分配。

配置负载均衡的服务器和端口

upstream myserver {
server 192.168.80.102:8081;
server 192.168.80.102:8082;
fair;
}
server {
listen 80;
location / {
proxy_pass http://myserver;
}
}

5、动静分离
5.1概述
将静态资源 css html js等和动态资源(jsp servlet)进行分开部署,我们可以将静态资源直接部署在专门的服务器上,也可以直接放在反向代理服务器上(Nginx)所在在的服务器上 然后动态资源还是部署在服务器上,如tomcat。
然后请求来的时候,静态资源从专门的静态资源服务器获取,动态资源还是转发到后端服务器上。

5.2配置
准备工作:在Linux的根目录下/的staticResource目录下创建两个文件夹,分别是www和image,在www目录下创建一个okc.html,在image目录下放一张ttt.jpg

实现效果,访问http://192.168.80.102:80/www/okc.html和http://192.168.80.102:80/image/ttt.img时可以成功访问资源

配置

server {
listen 80;
# 当访问路径带了www时,进入这个location处理,去/staticResource目录下对应的www目录 去找okc.html
# 即最终实现访问到这个路径
# http://192.168.80.102:80/staticResource/www/okc.html
location /www/{
root /staticResource/;
index index.html index.htm;
}
# 跟上面一样
location /image/{
root /staticResource/;
}
}
经过测试,成功访问

5.3root与alias区别与访问路径
alias 实际访问文件路径不会拼接URL中的路径
root 实际访问文件路径会拼接URL中的路径
示例如下:

alias

location ^~ /sta/ {
alias /usr/local/nginx/html/static/;
}

请求:http://test.com/sta/sta1.html
实际访问:/usr/local/nginx/html/static/sta1.html 文件
root

location ^~ /tea/ {
root /usr/local/nginx/html/;
}

请求:http://test.com/tea/tea1.html
实际访问:/usr/local/nginx/html/tea/tea1.html 文件
6、高可用集群
6.1概述
主备架构

作为备用服务器,当主服务器宕掉后,配置的备用服务器自动切换,
keepalived提供虚拟ip,对外我们访问的是虚拟ip,绑定了主备的ip

6.2配置
6.2.1环境搭建
开启两台虚拟机,都安装上nginx和keepalived

两台虚拟机的ip分别是 192.168.80.102 192.168.80.103

安装keepalived,直接使用yum安装

yum install -y keepalived

默认安装在/etc下,生成一个keepalived目录,里面有一个keepalived.conf文件,后面配置的主要就是这个配置文件

6.2.2配置