nginx 跨域问题

一个非常诡异的问题:

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

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

还望各位不吝赐教....
阅读 131
评论 更新于 3月26日
    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;
        }
    评论 赞赏 3月26日
      撰写回答

      登录后参与交流、获取后续更新提醒