AngularJs Client side not connecting to server side - angularjs

The problem is client side is not able to connect to server side. The issue as for as I know it is sending Request Method OPTIONS instead of GET. Look at these headers
General:
Remote Address:127.0.0.1:9000
Request URL:http://localhost:9000/api/v1/gyms
Request Method:OPTIONS
Status Code:404 Not Found
Response Headers:
view source
Content-Length:26454
Content-Type:text/html; charset=utf-8
Request Headers:
view source
Accept:*/*
Accept-Encoding:gzip, deflate, sdch
Accept-Language:en-US,en;q=0.8
Access-Control-Request-Headers:accept, accept-language, authorization, dev
Access-Control-Request-Method:GET
Connection:keep-alive
Host:localhost:9000
Origin:http://localhost
Referer:http://localhost/VTraining
User-Agent:Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/46.0.2490.71 Safari/537.36
X-FirePHP-Version:0.0.6
Isn't the General header should have GET Request Method. I deployed the client application on nginx.
This is my nginx.conf file HTTP settings.
http {
##
# Basic Settings
##
sendfile on;
tcp_nopush on;
tcp_nodelay on;
keepalive_timeout 65;
types_hash_max_size 2048;
# server_tokens off;
# server_names_hash_bucket_size 64;
# server_name_in_redirect off;
include /etc/nginx/mime.types;
default_type application/octet-stream;
client_max_body_size 20m;
server {
listen 9077;
server_name localhost 127.0.0.1;
index index.html;
root Web/Web/nginx/app/;
add_header "Access-Control-Allow-Origin" "*";
add_header "Access-Control-Allow-Methods" "GET, POST, OPTIONS, PUT, DELETE";
add_header "Access-Control-Allow-Headers" "X-Filter-Query, Authorization";
location ~ \.(js|css|png|jpg|jpeg|gif|ico|html|woff|ttf|svg|eot|otf)$ {
expires 1M;
access_log off;
add_header Cache-Control "public";
}
location / {
try_files $uri /index.html;
if ($request_method = OPTIONS ) {
add_header Content-Length 0;
add_header Content-Type text/plain;
add_header Access-Control-Allow-Origin *;
add_header Access-Control-Allow-Headers 'origin, x-requested-with, content-type, accept';
add_header Access-Control-Allow-Methods 'GET, POST';
return 200;
}
}
}

Related

How to configure nginx as development proxy to avoid CORS errors

for the past 3 days i've being searching the internet for solutions to CORS error to no success, i'm building a react app that access data from remote resource the remote resource is built with yii2 rest API, after alot search the suggestion was that i should configure nginx as a proxy ser and below is what I got so far
server {
set $project_root /var/www/html/
set $root /usr/share/nginx/html;
charset utf-8;
server_name api.checkstall.com;
root $project_root;
index index.html index.htm index.php;
add_header 'Access-Control-Allow-Origin' 'https://checkstall.com';
add_header 'Access-Control-Allow-Credentials' 'true';
add_header 'Access-Control-Allow-Headers' 'Authorization,Accept,Origin,DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Content-Range,Range';
add_header 'Access-Control-Allow-Methods' 'GET,POST,OPTIONS,PUT,DELETE,PATCH';
location / {
if (-f $root/api_maintenance_on.html) {
return 503;
}
rewrite ^/(.*)$ /index.php?$args&request_filename=$1 last;
try_files $uri $uri/ #rewrite;
if ($request_method = 'OPTIONS') {
add_header 'Access-Control-Max-Age' 86400;
add_header 'Content-Type' 'text/plain charset=UTF-8';
add_header 'Content-Length' 0;
return 204;
}
proxy_redirect off;
proxy_set_header host $host;
proxy_set_header X-real-ip $remote_addr;
proxy_set_header X-forward-for $proxy_add_x_forwarded_for;
proxy_pass https://api.checkstall.com;
}
}
}
After this set up few things changes:
The unauthenticated request with GET method works
The login method with post didn't work
signup methos with post on different controller with lodin didn't work either
without this setup nothing works at all
My observation was that for the /auth/login route no response header infortion was received, the server didn't hadd any response to the header
The above Images is before and after implementing proxy pass in nginx
I'm open to solutions either from both frontend, backend or server side and help would be appreciated

NGINX headers not working with GAE app.yaml

I'm trying to set some Nginx headers, running on Google App Engine B4.
This is the piece of code that I've placed in my app.yaml file:
runtime_config:
nginx_conf_http_include: nginx-http.conf
An this is the content of the nginx-http.conf file:
# Security headers
server_tokens off;
add_header X-Frame-Options SAMEORIGIN always;
add_header X-Content-Type-Options "nosniff" always;
add_header X-XSS-Protection "1; mode=block" always;
add_header Strict-Transport-Security "max-age=31536000; includeSubDomains" always;
add_header Content-Security-Policy "default-src 'self';" always;
add_header Referrer-Policy no-referrer;
add_header Feature-Policy "geolocation none;midi none;notifications none;push none;sync-xhr none;microphone none;camera none;magnetometer none;gyroscope none;speaker self;vibrate none;fullscreen self;payment none;";
None of these headers are available after deployment.
Please help guys!
The nginx_conf_http_include configuration item is only available for Flex environments and PHP language, that's why it doesn't work.
The best way to approach would be to set the headers by using the Handlers element, more specifically the http_headers, for example:
handlers:
- url: /images
static_dir: static/images
http_headers:
X-Foo-Header: foo
X-Bar-Header: bar value
# ...

Nginx CORS 'Access-Control-Allow-Origin' header

I have configured the Nginx reverse proxy with below configuration:
location ^~ /api/my-service/ {
if ($request_method = 'OPTIONS') {
add_header 'Access-Control-Allow-Origin' '*';
add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS, HEAD';
add_header 'Access-Control-Allow-Headers' 'Authorization,DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range';
add_header 'Access-Control-Max-Age' 1728000;
add_header 'Content-Type' 'text/plain; charset=utf-8';
add_header 'Content-Length' 0;
return 200;
}
if ($request_method = 'GET') {
add_header 'Access-Control-Allow-Origin' '*';
add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
add_header 'Access-Control-Allow-Headers' 'Authorization, DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range';
add_header 'Access-Control-Expose-Headers' 'Content-Length,Content-Range';
}
}
When this service is called from a different origin, in the network tab i see the response of a service like:
http://nginx-host/api/my-service/users/user
and the response headers are:
Cache-Control no-cache, no-store, max-age=0, must-revalidate
Connection keep-alive
Content-Type application/json;charset=UTF-8
Date Tue, 10 Apr 2018 07:54:40 GMT
Expires 0
Pragma no-cache
Server nginx/1.10.3 (Ubuntu)
Transfer-Encoding chunked
X-Content-Type-Options nosniff
X-Frame-Options DENY
X-XSS-Protection 1; mode=block
In the console of chrome/firefox i see:
Failed to load http://nginx-host/api/my-service/users/user: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://10.11.13.202:2200' is therefore not allowed access. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.
This call is made from a react based application, shall i add something in the request headers as well in order to get this through.
The OPTIONS response has headers displayed properly:
HTTP/1.1 204 No Content
Access-Control-Allow-Headers: Authorization,DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range
Access-Control-Allow-Methods: GET, POST, OPTIONS, HEAD
Access-Control-Allow-Origin: *
Access-Control-Max-Age: 1728000
Connection: keep-alive
Content-Length: 0
Content-Type: text/plain; charset=utf-8
Date: Tue, 10 Apr 2018 08:08:53 GMT
Server: nginx/1.10.3 (Ubuntu)
The API exposed is cheeky, for a GET request the response header is 202 accepted which ideally should have been 200, NGINX in this case does not append the response headers and messes up the configurations. Duh!
Another way would be to use always alongside the * placeholder something like:
add_header 'Access-Control-Allow-Origin' '*' always;
works!

No 'Access-Control-Allow-Origin' header for Grafana

I'm trying to setup Grafana on top of nginx. Here's how my current setup is. Grafana is supposed to talk to both graphite and elastic search on the same server.
Here's my nginx configuration file. I'm not sure what's wrong in this configuration:
#graphite server block
server {
listen 8080 ;
access_log /var/log/nginx/graphite.access.log;
error_log /var/log/nginx/graphite.error.log;
location / {
include uwsgi_params;
uwsgi_pass 127.0.0.1:3031;
}
}
#grafana server block
server {
listen 9400;
access_log /var/log/nginx/grafana.access.log;
error_log /var/log/nginx/grafana.error.log;
location / {
auth_basic "Restricted";
auth_basic_user_file /etc/nginx/.htpasswd;
add_header Access-Control-Allow-Origin 'http://54.123.456.789:9400';
add_header 'Access-Control-Allow-Methods' 'GET, POST, PUT, DELETE';
add_header 'Access-Control-Allow-Headers' 'Authorization, Content-Type, origin, accept';
add_header 'Access-Control-Allow-Credentials' 'true';
root /usr/share/grafana;
}
}
Now, whenever I try to run Grafana, it gives me the following error:
XMLHttpRequest cannot load http://54.123.456.789:8080/render. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://54.123.456.789:9400' is therefore not allowed access.
Can someone please help me out in this? Thanks in advance.
Try putting the four lines of Access-Control-Allow-* in the configuration of the graphite server.
To my mind, grafana is asking graphite and that's graphite who has to allow Grafana.
Ok I wasn't specifically setting up Graphana, but I was intending CORS to work with the auth_basic directive from nginx because such directive overrides any headers that you had before whenever authentication is required (When the server returns a 401 basically)
So after a copule hours of research I found this Gist: https://gist.github.com/oroce/8742704 which is specifically targetted to Graphana and possibly gives a complete answer to this question.
BUT for my particular purposes, which again were to combine auth_basic with CORS headers via add_header, my take away from that Gist is the following:
Your server location should follow a structure like the one below:
location / {
proxy_pass <PROXY_PASS_VALUE>;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Proto $scheme;
# Any additional headers and proxy configuration for the upstream...
# Remove the CORS Origin header if set by the upstream
proxy_hide_header 'Access-Control-Allow-Origin';
# Add our own set of CORS headers
# The origin specifically, when using ith with authentication CANNOT be set to * as per the spec, it must return 1 and only 1 value so to mimic "*"'s behavior we mirror the origin
add_header Access-Control-Allow-Origin $http_origin;
add_header Access-Control-Allow-Methods
'GET,POST,PUT,DELETE,OPTIONS';
add_header Access-Control-Allow-Headers 'Authorization';
add_header Access-Control-Allow-Credentials 'true';
if ( $request_method = 'OPTIONS' ) {
# If request method is options we immediately return with 200 OK
# If we didn't do this then the headers would be overwritten by the auth_basic directive when Browser pre-flight requests are made
return 200;
}
# This should be set AFTER the headers and the OPTIONS methos are taken care of
auth_basic 'Restricted';
auth_basic_user_file <HTPASSD_FILE_PATH>;
}
Then when using this from a browser environment, you could issue the following:
fetch(
'<URL>',
{
method: 'POST',
body: <YOUR_BODY_OBJECT>,
// This must be set for BASIC Auth to work with CORS
credentials: 'include'
}
)
.then( response => response.json() )
.then( data => {
console.log( data );
} );

angular js nginx cors - No 'Access-Control-Allow-Origin' header

I know different versions of this same question have been asked, I have read all of the related questions and answers I could find on SO and Google.
I am trying to make a cross domain request from an angularJS app to an nginx server. All of the GET requests behave properly but my POST request does not.
Chrome was giving me a 'Access-Control-Allow-Origin' error so I added the following to my nginx server config:
location / {
if ($http_origin ~* (https?://.*\.mysite\.com(:[0-9]+)?)) {
set $cors "true";
}
if ($request_method = 'OPTIONS') {
set $cors "${cors}options";
}
# non-OPTIONS indicates a normal CORS request
if ($request_method = 'GET') {
set $cors "${cors}get";
}
if ($request_method = 'POST') {
set $cors "${cors}post";
}
# if it's a GET or POST, set the standard CORS responses header
if ($cors = "trueget") {
add_header 'Access-Control-Allow-Origin' "$http_origin";
#add_header 'Access-Control-Allow-Credentials' 'true';
}
if ($cors = "truepost") {
add_header 'Access-Control-Allow-Origin' "$http_origin";
#add_header 'Access-Control-Allow-Credentials' 'true';
}
if ($cors = "trueoptions") {
add_header 'Access-Control-Allow-Origin' "$http_origin";
#add_header 'Access-Control-Allow-Credentials' 'true';
#
# Return special preflight info
#
add_header 'Access-Control-Max-Age' 1728000;
add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
add_header 'Access-Control-Allow-Headers' 'Authorization,Content-Type,Accept,Origin,User-Agent,DNT,Cache-Control,X-Mx-ReqToken,Keep-Alive,X-Requested-With,If-Modified-Since';
add_header 'Content-Length' 0;
add_header 'Content-Type' 'text/plain charset=UTF-8';
return 204;
}
}
the OPTIONS request returns status of 204 and the added headers as expected:
Request URL:<code>http://otherSite/shfofx/PHP/Add/addTrade</code>
Request Method:OPTIONS
Status Code:204 No Content
Request Headers
Accept:*/*
Accept-Encoding:gzip,deflate,sdch
Accept-Language:en-US,en;q=0.8
Access-Control-Request-Headers:accept, x-requested-with, content-type
Access-Control-Request-Method:POST
AlexaToolbar-ALX_NS_PH:AlexaToolbar/alxg-3.2
Cache-Control:no-cache
Connection:keep-alive
Host:otherSite
Origin:<code>http://test-shf.mysite.com</code>
Pragma:no-cache
Referer:<code>http://test-shf.mysite.com/portfolio</code>
User-Agent:Mozilla/5.0 (Macintosh; Intel Mac OS X 10_9_1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/31.0.1650.63 Safari/537.36
Response Headersview source
Access-Control-Allow-Headers:Authorization,Content-Type,Accept,Origin,User- Agent,DNT,Cache-Control,X-Mx-ReqToken,X-Requested-With,Keep-Alive,If-Modified-Since
Access-Control-Allow-Methods:GET, POST, OPTIONS
Access-Control-Allow-Origin:<code>http://test-shf.mysite.com</code>
Access-Control-Max-Age:1728000
Connection:keep-alive
Content-Length:0
Content-Type:text/plain charset=UTF-8
Date:Thu, 02 Jan 2014 22:54:58 GMT
Server:nginx/1.2.6 (Ubuntu)
Then I see a network call with the POST request in the Chrome network tab that is cancelled with the following console output:
XMLHttpRequest cannot load <code>http://otherSite/shfofx/PHP/Add/addTrade</code>.
No 'Access-Control-Allow-Origin' header is present on the requested resource.
Origin 'http://test-shf.mysite.com' is therefore not allowed access.
the header info for the cancelled POST request is:
Request URL:<code>http://otherSite/shfofx/PHP/Add/addTrade</code>
Request Headers
Accept:application/json, text/plain, */*
Cache-Control:no-cache
Content-Type:application/json;charset=UTF-8
Origin:<code>http://test-shf.mysite.com</code>
Pragma:no-cache
Referer:<code>http://test-shf.mysite.com/portfolio</code>
User-Agent:Mozilla/5.0 (Macintosh; Intel Mac OS X 10_9_1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/31.0.1650.63 Safari/537.36
X-Requested-With:XMLHttpRequest
Request Payload
{UserFIID:0, FinancialInstID:4, FinancialInstName:undefined, UserID:1, SHFUserID:1,…}
Why is the preflight OPTIONS request allowed but my POST request cancelled?
so the answer was simple and annoying.
My dev server was configured to allow loosely interpreted filenames, so:
Request URL:http://otherSite/shfofx/PHP/Add/addTrade
would resolve to addTrade.php, and the code would be executed as expected. In my test server, however, the server is configured to only return the exact case sensitive page requested. So, the POST request was returning a status of '404 Not Found'.
To make matters worse, Chrome's network tab did not relay the 404 response just the 'Access-Control-Allow-Origin' error. It wasn't until I inspected the server response firefox that I was able to determine and resolve the issue.
I simply changed:
Request URL:http://otherSite/shfofx/PHP/Add/addTrade
to:
Request URL:http://otherSite/shfofx/PHP/Add/addTrade.php
and that was it.

Resources