Jquery Question posted in
The official Jquery Api Documentation can be found here.

Jquery – nginx CORS Policy fail

When I try to GET request from my front end project I am getting this error

Access to XMLHttpRequest at ‘http://10.3.0.112:41052/operations’ from origin ‘http://10.3.0.112:5488’ has been blocked by CORS policy: Response to preflight request doesn’t pass access control check: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.

An above code is my nginx config file.

events {}
http {
    upstream tag {
        server tag:41038;
        server tag:42038;
    }

    server {
        listen 41038;
        listen 42038;

        location / {
            proxy_pass http://tag;
        }
    }


    upstream order {
        server order:41052;
        server order:42052;
        server order:43052;
    }

    server {
        listen 41052;
        listen 42052;
        listen 43052;

        location / {
            proxy_pass http://order;
        }
    }
}

And the last one is from my front-end application ajax request


   function allCompletedJobOrders() {
     requestStarted()
     if(hasSelectableProps.length > 0) {
        let stationIds = hasSelectableProps.map(item => item.id)
        completedJobOrders = []   
        jobOrders = []
          $.ajax({
            type: "GET",
            url: `http://${getConfig('serverAddress')}:41052/job-orders?stationIds=${stationIds}`,
            headers: {
              'Accept': 'application/json',
              'Content-Type': 'application/json',
              'Authorization': auth ? `${auth.token_type} ${auth.access_token}` : null
            },
            success: function (data) {
              if(data.length > 0){
                data.filter(item => item.startTime && item.endTime).forEach(jobOrder => {
                  completedJobOrders.push({
                    id: jobOrder.id,
                    code:jobOrder.code,
                    stationId:jobOrder.stationId,
                    startTime:jobOrder.startTime,
                    endTime: jobOrder.endTime,
                    targetAmount:jobOrder.targetAmount,
                  })
                })
            data.filter(item =>  !item.endTime).forEach(jobOrder => {
                jobOrders.push({
                  id: jobOrder.id,
                  code:jobOrder.code,
                  stationId:jobOrder.stationId,
                  startTime:jobOrder.startTime,
                  endTime: jobOrder.endTime,
                  targetAmount:jobOrder.targetAmount,
                  operationId: jobOrder.operations[0] ? jobOrder.operations[0].operationId : [],
                })
          })
          requestEnded()
            let jobOrderIds = jobOrders.map(item => item.id)
          getRollersByIds(jobOrderIds)
        }
      }
      
      })
  }
}

I tried change my nginx config file, but it didn’t work. I need to complete all request from my front end application

Tags:

2

Answers


  1. 0

    CORS stands for Cross Origin Resource Sharing.

    CORS issue in not related to nginx rather it is a configuration that we need to apply in our backend. We get this error when our browser URL and API URL are different from each other thus the term Cross Origin.

    Simply include your origin i.e. 'http://10.3.0.112:5488' on the cors allowed origin in the backend and it should work.

    The following is an example in Node.js.

    var express = require('express')
var cors = require('cors')
var app = express()
 
// ADD YOUR ALLOWED ORIGINS HERE.
var whitelist = ['http://10.3.0.112:5488', 'http://example1.com']
var corsOptions = {
  origin: function (origin, callback) {
    if (whitelist.indexOf(origin) !== -1) {
      callback(null, true)
    } else {
      callback(new Error('Not allowed by CORS'))
    }
  }
}
 
app.get('/products/:id', cors(corsOptions), function (req, res, next) {
  res.json({msg: 'This is CORS-enabled for a whitelisted domain.'})
})
 
app.listen(80, function () {
  console.log('CORS-enabled web server listening on port 80')
})
    Login or Signup to reply.
  2. 0

    Try to configure your config file like

     server {
    listen 41038;
    listen 42038;

    location / {
        proxy_pass http://tag;
        add_header 'Access-Control-Allow-Origin' '*';
        add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
        add_header 'Access-Control-Allow-Headers' 'Content-Type, Authorization';
        if ($request_method = 'OPTIONS') {
            add_header 'Access-Control-Allow-Origin' '*';
            add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
            add_header 'Access-Control-Allow-Headers' 'Content-Type, Authorization';
            add_header 'Access-Control-Max-Age' 1728000;
            add_header 'Content-Length' 0;
            add_header 'Content-Type' 'text/plain charset=UTF-8';
            return 204;
        }
    }
}

server {
    listen 41052;
    listen 42052;
    listen 43052;

    location / {
        proxy_pass http://order;
        add_header 'Access-Control-Allow-Origin' '*';
        add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
        add_header 'Access-Control-Allow-Headers' 'Content-Type, Authorization';
        if ($request_method = 'OPTIONS') {
            add_header 'Access-Control-Allow-Origin' '*';
            add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
            add_header 'Access-Control-Allow-Headers' 'Content-Type, Authorization';
            add_header 'Access-Control-Max-Age' 1728000;
            add_header 'Content-Length' 0;
            add_header 'Content-Type' 'text/plain charset=UTF-8';
            return 204;
        }
    }

    Or use chrome extension Allow CORS: Access-Control-Allow-Origin

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search