【微服务架构 - 10 - Nginx】04 使用 Nginx 解决跨域问题

爱被打了一巴掌 2022-03-15 13:52 216阅读 0赞

#### 概述 ####

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

在使用 Nginx 搭建的 CDN 时，可能会出现字体跨域问题：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTgxMjgy_size_16_color_FFFFFF_t_70]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTgxMjgy_size_16_color_FFFFFF_t_70 1]

原因是因为字体文件在 CDN 服务器上、项目而在自己的服务器上，这样就出现了跨域问题。

跨域，指的是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的，是浏览器对 JavaScript 施加的安全限制。

#### 如何解决跨域问题？ ####

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

##### 使用 Nginx 反向代理解决跨域问题 #####

修改 `nginx.conf` 文件，增加 `header`

worker_processes  1;
    
    events {
        worker_connections  1024;
    }
    
    http {
        include       mime.types;
        default_type  application/octet-stream;
    
        sendfile        on;
    
        keepalive_timeout  65;
    
        server {
            listen 80;
            server_name  192.168.106.128;
            location / {
                add_header Access-Control-Allow-Origin  *;
                add_header Access-Control-Allow-Headers X-Requested-With;
                add_header Access-Control-Allow-Methods GET,POST,PUT,DELETE,PATCH,OPTIONS;    
                
                root /usr/share/nginx/wwwroot/cdn;
                index  index.html index.htm;
            }
        }
    }

跨域问题成功解决:

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTgxMjgy_size_16_color_FFFFFF_t_70 2]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTgxMjgy_size_16_color_FFFFFF_t_70]: /images/20220315/5b607157228a4c05a6fa6c061e92ed53.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTgxMjgy_size_16_color_FFFFFF_t_70 1]: /images/20220315/f62fb497c3494691b9b162501f6398b5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTgxMjgy_size_16_color_FFFFFF_t_70 2]: /images/20220315/2fcd502cfffe4d509c704a10f0fe0f32.png