使用Nginx解决跨域问题

布满荆棘的人生 2024-03-27 17:26 0阅读 0赞

**目录**

使用Nginx解决跨域问题

1、修改浏览器、客户端访问地址

2、在nginx.conf配置文件需配置server

3、在Nginx中配置客户端访问的接口（按照规则或通配），并设置被代理的服务器

4、在Nginx中统一配置客户端访问的头部信息（解决跨域问题）

5、在服务器端设置相应的头部信息（字符集编码等）

--------------------

### 使用Nginx解决跨域问题 ###

#### 1、修改浏览器、客户端访问地址 ####

![5b47ea83df4d4cc3b8e06c2d2832b5b1.png][]

#### 2、在nginx.conf配置文件需配置server ####

开放端口

server {
            listen       8000;    #自定义端口
        #    listen       somename:8080;
        #    server_name  somename  alias  another.alias;
    
            location / {
                root   html;    #访问路径
                index  index.html index.htm;    #首先访问的页面
            }
        }

配置静态资源和默认地址（放在nginx/html中）

![9552f53a12094a2195ca6e0a4adc8007.png][]

![7c5f80e1b3264e4588c1c955008fdf2d.png][]

配置好，重新加载配置文件，重新访问页面，就会变成你设置的页面

![f8a4e04751ba4d98be31cca42c82a3d8.png][]

#### 3、在Nginx中配置客户端访问的接口（按照规则或通配），并设置被代理的服务器 ####

![2e7a7b8a438a4e2bb165c57e93dc3968.png][]

#### 4、在Nginx中统一配置客户端访问的头部信息（解决跨域问题） ####

![1b2cf5aecffd4cd4b7c60184c04f66b2.png][]

#### 5、在服务器端设置相应的头部信息（字符集编码等） ####

![bdaccfce521c43e3a36be289fadc029f.png][]

[5b47ea83df4d4cc3b8e06c2d2832b5b1.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/27/81a7f0245a4e4a6fa5d5109dde3362a2.png
[9552f53a12094a2195ca6e0a4adc8007.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/27/601c10c9d91a404ab0dbe834c92368f5.png
[7c5f80e1b3264e4588c1c955008fdf2d.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/27/590aa62f54d346b49e661fc4ec710033.png
[f8a4e04751ba4d98be31cca42c82a3d8.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/27/7e4c52aa9f794841a74386a7cd06b636.png
[2e7a7b8a438a4e2bb165c57e93dc3968.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/27/d6a724b9181a4b17abc4a61542cfb10c.png
[1b2cf5aecffd4cd4b7c60184c04f66b2.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/27/eb88cda24ff248398f3834ccf9540b10.png
[bdaccfce521c43e3a36be289fadc029f.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/27/30a4561c05634850b2d48253b88718a9.png