nginx 跨域问题

Question

一个非常诡异的问题:

前后端分离项目,前端angular,后台lumen,服务器nginx,出现跨域问题,nginx.conf 配置add_header,前端在请求后台接口时出现跨域问题,但我请求另一个部署在本地的后台项目却没有跨域问题.

两个后台项目nginx配置除了server_name和root外其他完全相同.

还望各位不吝赐教....

Answer 1

跨域问题发生在浏览器层面。在angular中设置拦截器，将后台的请求添加特定的前缀。使前台后请求的协议、地址、端口均相同。后台再用nignx进行转发，可以归避此问题。

  intercept(
    req: HttpRequest<any>,
    next: HttpHandler,
  ): Observable<HttpEvent<any>> {
    /**
     * 为request加上服务端前缀
     */
    let url = '/api';

    if (!url.startsWith('https://') && !url.startsWith('http://')) {
      url = config.server + url;
    }

    let request = req.clone({url});
    return next.handle(request)

nginx 示例如下：

server {
    listen 80;
    server_name www.domain.com;

    location / {
        root  /angularApp/home;
        try_files $uri $uri/ /index.html;
    }

    location /api/ {
        proxy_pass http://127.0.0.1:8002/;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    }