零基础自学Nginx 进阶篇 2 Nginx静态资源部署 2.6 Nginx的跨域问题解决 2.6.3 Nginx解决跨域问题的具体实现

àì夳堔傛蜴生んèń 2024-03-26 13:56 21阅读 0赞

#### 零基础自学Nginx ####

#### 文章目录 ####

*   *   *  零基础自学Nginx
         *  进阶篇
         *  2 Nginx静态资源部署
         *   *  2.6 Nginx的跨域问题解决
             *   *  2.6.3 Nginx解决跨域问题的具体实现

[【黑马程序员Nginx教程，Java进阶从0到1学会Nginx分布式框架】 ][Nginx_Java_0_1_Nginx_]

![在这里插入图片描述][1efb5856c5d247d4aaa59943ead03c06.png_pic_center]

#### 进阶篇 ####

#### 2 Nginx静态资源部署 ####

##### 2.6 Nginx的跨域问题解决 #####

###### 2.6.3 Nginx解决跨域问题的具体实现 ######

使用add\_header指令，该指令可以用来添加一些头信息

<table> 
 <thead> 
  <tr> 
   <th>语法</th> 
   <th>add_header name value…</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>默认值</td> 
   <td>—</td> 
  </tr> 
  <tr> 
   <td>位置</td> 
   <td>http、server、location</td> 
  </tr> 
 </tbody> 
</table>

此处用来解决跨域问题，需要添加两个头信息，一个是`Access-Control-Allow-Origin`,`Access-Control-Allow-Methods`

*  Access-Control-Allow-Origin: 直译过来是允许跨域访问的源地址信息，可以配置多个(多个用逗号分隔)，也可以使用`*`代表所有源
 *  Access-Control-Allow-Methods:直译过来是允许跨域访问的请求方式，值可以为 GET POST PUT DELETE…,可以全部设置，也可以根据需要设置，多个用逗号分隔

具体配置方式

location /getUser{
        add_header Access-Control-Allow-Origin *;
        add_header Access-Control-Allow-Methods GET,POST,PUT,DELETE;
        default_type application/json;
        return 200 '{"id":1,"name":"TOM","age":18}';
    }

![在这里插入图片描述][53a073d815b14800a4d26cda89b624d8.png_pic_center]

保存，测试并重新加载

![在这里插入图片描述][5008a6a3c5c346e9ad916dd643ef534b.png_pic_center]

再试一次

![在这里插入图片描述][2cd3fd49b78b41a99fa0c63c80180636.png_pic_center]

没毛病，问题解决。

最后看看响应头

![在这里插入图片描述][25c40203b4804f70a17e9b45bf1f8ed7.png_pic_center]

没毛病，这就是我们自己添加的头

[Nginx_Java_0_1_Nginx_]: https://www.bilibili.com/video/BV1ov41187bq/
[1efb5856c5d247d4aaa59943ead03c06.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/5bb81b94670f42e28ef50301eb88c997.png
[53a073d815b14800a4d26cda89b624d8.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/70e158e62fae41718ec544db6ae68e86.png
[5008a6a3c5c346e9ad916dd643ef534b.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/c5d4b5c5afe1427aa7ba798ad4c02766.png
[2cd3fd49b78b41a99fa0c63c80180636.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/f23c518acc1a499fb6a633219ee67038.png
[25c40203b4804f70a17e9b45bf1f8ed7.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/63d9c441526c4de7904a4e43210e88f3.png