TechQA.

Using mixpanel(in angular) with nginx [error]: Bad content type. Please use multipart

71 views Asked by At

In the 'Response section' of Network Tab it shows text like "Bad content type. Please use multipart."

I tried multiple approaches to get rid of the content-type issue

  • Content-Type "multipart/form-data"
  • Content-Type "multipart/related"
  • Content-Type "application/json"
  • Removing the content type Parameter

None of the solution works out!

OVERVIEW

I am trying to use mixpanel in my angular application, but the network requests are getting blocked when trying to run the application on Brave or on Chrome with some add blockers.

Screenshot : error without using nginx

POST https://api-js.mixpanel.com/track/?verbose=1&ip=1&_=1706583867562 504 (Gateway Timeout)
Mixpanel error: Bad HTTP status: 504 Gateway Timeout
Mixpanel error: [batch] Error; retry in 10000 ms

To get rid of the blocked Request I implemented the nginx config which is mentioned in the mixpanel documentation mixpanel-official-doc.

This is my nginx.config file.

events {}
http {
    server {
        listen 4999 default backlog=16384;
        listen [::]:4999 default backlog=16384;

        location /lib.min.js {
            proxy_set_header X-Real-IP $http_x_forwarded_for;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
            proxy_set_header X-Forwarded-Host $server_name;
            proxy_pass https://cdn.mxpnl.com/libs/mixpanel-2-latest.min.js;
        }

        location /lib.js {
            proxy_set_header X-Real-IP $http_x_forwarded_for;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
            proxy_set_header X-Forwarded-Host $server_name;
            proxy_pass https://cdn.mxpnl.com/libs/mixpanel-2-latest.js;
        }

        location /decide {
            proxy_set_header Host decide.mixpanel.com;
            proxy_set_header X-Real-IP $http_x_forwarded_for;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
            proxy_set_header X-Forwarded-Host $server_name;
            proxy_pass https://decide.mixpanel.com/decide;
        }

        location / {
            proxy_set_header Host api.mixpanel.com;
            proxy_set_header X-Real-IP $http_x_forwarded_for;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
            proxy_set_header X-Forwarded-Host $server_name;
            proxy_pass https://api.mixpanel.com/;
        }
    }
}

My app.component.Ts Code:

myid = "ae02abe786309xxxxxxxxxxxxxx"
MIXPANEL_CUSTOM_LIB_URL = "http://localhost:4999/lib.min.js";
  
mixpanel.init(this.myid, {
   api_host: this.MIXPANEL_CUSTOM_LIB_URL,
   debug: true,
   track_pageview: true,
});

still got the same errors for blocking network requests along with CORS error.

Screenshot: console log errors

Screenshot: Network Tab

Access to XMLHttpRequest at 'http://localhost:4999/lib.min.js/track/?verbose=1&ip=1&_=1706584713221' from origin 'http://localhost:4222' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

To get rid of the CORS error and to pass proxy I looked for multiple solution on the web and end up with this nginx.config file.

worker_processes  1;

events {
    worker_connections  1024;
}

http {
    include       mime.types;
    server {
        listen 4999 default backlog=16384;
        listen [::]:4999 default backlog=16384;
        location / {

             if ($request_method = 'OPTIONS') {
                add_header 'Access-Control-Allow-Origin' 'http://localhost:4222' always;
                add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS' always;
                add_header 'Access-Control-Allow-Headers' 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type' always;
                add_header 'Access-Control-Allow-Credentials' 'true' always;
                add_header 'Content-Length' 0;
                add_header 'Content-Type' 'text/plain' always;
                return 204;
            }


            add_header 'Access-Control-Allow-Origin' 'http://localhost:4222' always;
            add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS' always;
            add_header 'Access-Control-Allow-Headers' 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type' always;
            add_header 'Access-Control-Allow-Credentials' 'true' always;
            proxy_set_header Accept-Encoding "";
            proxy_set_header Accept-Language $http_accept_language;
            proxy_set_header Host api.mixpanel.com;
            proxy_set_header X-Real-IP $http_x_forwarded_for;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
            proxy_set_header X-Forwarded-Host $server_name;
            proxy_pass https://api.mixpanel.com/;
            proxy_set_header Content-Type "multipart/form-data";
        }
        
        location /api-js.mixpanel.com {

             if ($request_method = 'OPTIONS') {
                add_header 'Access-Control-Allow-Origin' 'http://localhost:4222' always;
                add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS' always;
                add_header 'Access-Control-Allow-Headers' 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type' always;
                add_header 'Access-Control-Allow-Credentials' 'true' always;
                add_header 'Content-Length' 0;
                add_header 'Content-Type' 'text/plain' always;
                return 204;
            }

            add_header 'Access-Control-Allow-Origin' 'http://localhost:4222' always;
            add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS' always;
            add_header 'Access-Control-Allow-Headers' 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type' always;
            add_header 'Access-Control-Allow-Credentials' 'true' always;
            proxy_set_header Accept-Encoding "";
            proxy_set_header Accept-Language $http_accept_language;
            proxy_set_header X-Real-IP $http_x_forwarded_for;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
            proxy_set_header X-Forwarded-Host $server_name;
            proxy_pass https://cdn.mxpnl.com/libs/mixpanel-2-latest.min.js;
            proxy_set_header Content-Type "multipart/form-data";
        }
        location /lib.min.js {

             if ($request_method = 'OPTIONS') {
                add_header 'Access-Control-Allow-Origin' 'http://localhost:4222' always;
                add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS' always;
                add_header 'Access-Control-Allow-Headers' 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type' always;
                add_header 'Access-Control-Allow-Credentials' 'true' always;
                add_header 'Content-Length' 0;
                add_header 'Content-Type' 'text/plain' always;
                return 204;
            }

            add_header 'Access-Control-Allow-Origin' 'http://localhost:4222' always;
            add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS' always;
            add_header 'Access-Control-Allow-Headers' 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type' always;
            add_header 'Access-Control-Allow-Credentials' 'true' always;
            proxy_set_header Accept-Encoding "";
            proxy_set_header Accept-Language $http_accept_language;
            proxy_set_header X-Real-IP $http_x_forwarded_for;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
            proxy_set_header X-Forwarded-Host $server_name;
            proxy_pass https://cdn.mxpnl.com/libs/mixpanel-2-latest.min.js;
            proxy_set_header Content-Type "multipart/form-data";
        }

        location /lib.js {

             if ($request_method = 'OPTIONS') {
                add_header 'Access-Control-Allow-Origin' 'http://localhost:4222' always;
                add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS' always;
                add_header 'Access-Control-Allow-Headers' 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type' always;
                add_header 'Access-Control-Allow-Credentials' 'true' always;
                add_header 'Content-Length' 0;
                add_header 'Content-Type' 'text/plain' always;
                return 204;
            }

            add_header 'Access-Control-Allow-Origin' 'http://localhost:4222' always;
            add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS' always;
            add_header 'Access-Control-Allow-Headers' 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type' always;
            add_header 'Access-Control-Allow-Credentials' 'true' always;
            proxy_set_header Accept-Encoding "";
            proxy_set_header Accept-Language $http_accept_language;
            proxy_set_header X-Real-IP $http_x_forwarded_for;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
            proxy_set_header X-Forwarded-Host $server_name;
            proxy_pass https://cdn.mxpnl.com/libs/mixpanel-2-latest.js;
            proxy_set_header Content-Type "multipart/form-data";
        }

        location /decide {

             if ($request_method = 'OPTIONS') {
                add_header 'Access-Control-Allow-Origin' 'http://localhost:4222' always;
                add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS' always;
                add_header 'Access-Control-Allow-Headers' 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type' always;
                add_header 'Access-Control-Allow-Credentials' 'true' always;
                add_header 'Content-Length' 0;
                add_header 'Content-Type' 'text/plain' always;
                return 204;
            }

            add_header 'Access-Control-Allow-Origin' 'http://localhost:4222' always;
            add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS' always;
            add_header 'Access-Control-Allow-Headers' 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type' always;
            add_header 'Access-Control-Allow-Credentials' 'true' always;
            proxy_set_header Accept-Encoding "";
            proxy_set_header Accept-Language $http_accept_language;
            proxy_set_header Host decide.mixpanel.com;
            proxy_set_header X-Real-IP $http_x_forwarded_for;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
            proxy_set_header X-Forwarded-Host $server_name;
            proxy_pass https://decide.mixpanel.com/decide;
            proxy_set_header Content-Type "multipart/form-data";

        }
    }
}

Now the console shows the following errors

mixpanel.service.ts:14 POST http://localhost:4999/lib.min.js/track/?verbose=1&ip=1&_=1706585271250 400 (Bad Request)
Mixpanel error: Bad HTTP status: 400 Bad Request

now in the Response section of Network Tab it shows text like "Bad content type. Please use multipart."

I tried multiple approaches to get rid of the content-type issue

  • Content-Type "multipart/form-data"
  • Content-Type "multipart/related"
  • Content-Type "application/json"
  • Removing the content type Parameter

None of the solution works out What was i am doing wrong ?

angular nginx multipartform-data mixpanel 400-bad-request
Original Q&A
0

There are 0 answers

Related Questions in ANGULAR

Related Questions in NGINX

Related Questions in MULTIPARTFORM-DATA

Related Questions in MIXPANEL

Related Questions in 400-BAD-REQUEST

Popular Questions

Popular Tags

javascript python java c# php android html jquery c++ css ios sql mysql r reactjs node.js arrays c asp.net json

Trending Questions