t3chnoboy / amazon-product-api

:credit_card: Amazon Product Advertising API client
366 stars 104 forks source link

No 'Access-Control-Allow-Origin' header is present on the requested resource. #105

Open JTP709 opened 6 years ago

JTP709 commented 6 years ago

I'm trying to test the code in the documentation but I'm receiving this error:

No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:3000' is therefore not allowed access.

I'm using this in a React app, here is the code for the function from the component:

 addAmazonGift(){
        const client = amazon.createClient({
          awsId: "AKIAIMKFRHPPTEIMU2YA",
          awsSecret: "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",
          awsTag: "jtp709-20"
        });
        client.itemLookup({
          idType: 'UPC',
          itemId: '635753490879',
          responseGroup: 'ItemAttributes,Offers,Images'
        }, function(err, results, response) {
          if (err) {
            console.log(err);
          } else {
            console.log(results);
          }
        });
    }
JuanCrg90 commented 6 years ago

This package must be used in backend. The AWS credentials are very delicate.

fatdem commented 6 years ago

I am using this on the backend (node js) but then i get the same error. Edit: I am using the API on my server.js using Express. But then looking at console on chrome, i see the following error whenever i do a product search.

No 'Access-Control-Allow-Origin' header is present on the requested resource

fatdem commented 6 years ago

Edit: Here is a snippet of my code. @JuanCrg90 If you could please point me in the right direction. I am using webpack.

```
const path = require('path');
const express = require('express');
const webpack = require('webpack');
const webpackMiddleware = require('webpack-dev-middleware');
const webpackHotMiddleware = require('webpack-hot-middleware');
const amazon = require('amazon-product-api');
const http = require('http');
const isDeveloping = process.env.NODE_ENV !== 'production';
const port = process.env.PORT || 5000;
const app = express();
const server = http.createServer(app)
const io = require('socket.io').listen(server);

server.listen(port, '0.0.0.0', function onStart(err) {
  if (err) {
    console.log(err);
  }
  console.info('==> 🌎 Listening on port %s. Open up http://0.0.0.0:%s/ in your browser.', port, port);
});

io.sockets.on('connection', function(client){
  console.log("socket connected!");
      const amazonClient = amazon.createClient({
            awsId: 'AWSID',
            awsSecret: 'AWSSecret',
            awsTag: 'awsTag'
       });

client.on('search', function(object){
    if(object){
        amazonClient.itemSearch({
            Keywords: object.Keywords,
            MaximumPrice: object.MaximumPrice,
            Availability: object.Availability,
            responseGroup: object.responseGroup,
            SearchIndex: object.SearchIndex,
            condition: object.condition,
            ItemPage: object.ItemPage
        }).then(function(results){
            //console.log('search found!', results);
            client.emit('Data', results);
        }).catch(function(err){
            client.emit('Error', err);
        });
    }
});
juliobasito commented 6 years ago

I have the same problem No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:3000' is therefore not allowed access.'.

My problem was partially solved when I add this extension : https://chrome.google.com/webstore/detail/cors-toggle/jioikioepegflmdnbocfhgmpmopmjkim to my chrome browser.

Maybe we must add domain on amazon partnairs website ?

If anybody had a better way to solved this issue, you're welcome.

arhoy commented 4 years ago

This package must be used in backend. The AWS credentials are very delicate.

Why does it say "Client" if it must be used on the server side?

JuanCrg90 commented 4 years ago

@arhoy Client is any tool that you can use to communicate with the service (not only a web browser) for example a google home or Alexa could be a client for a webservice.

arhoy commented 4 years ago

I see thanks Juan very much for clarifying! How can I solve this then? If I am rendering server side, than I can create an API which calls Amazons API on the backend. Then use my API on the front end of my React App? Is that the correct way?

Thank you!

On Sat, Dec 28, 2019 at 8:52 PM Juan Carlos Ruiz González < notifications@github.com> wrote:

@arhoy https://github.com/arhoy Client is any tool that you can use to communicate with the service (not only a web browser) for example a google home or Alexa could be a client for a webservice.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/t3chnoboy/amazon-product-api/issues/105?email_source=notifications&email_token=ACPMK7ID4ZQ3LMUUNJT7TK3Q3ANIHA5CNFSM4EKAX2GKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEHYXFVQ#issuecomment-569471702, or unsubscribe https://github.com/notifications/unsubscribe-auth/ACPMK7J34LWSBH46YPJ36OTQ3ANIHANCNFSM4EKAX2GA .

sajjadalis commented 4 years ago

Does anyone have a solution for this?

I have created a Vue app which have a separate back-end on my localhost. I can search products fine with chrome CORS extension. But if CORS extension is active then i can't submit products data to Firestore database. So in order to submit, i have to disable CORS extension.. This process is painful as each time i make search, i have to enable CORS and then disable it for data submission in Chrome.

But then there is another issue which i don't know how to get around. As i searched for 10 products and added them to firebase. Now i need to filter out those 10 products from new amazon search response.. In this case, both firebase and amazon api need to work at the same time. So i can get ASIN list in an array from firestore db and then use filter method to return only products which are not in firestore db.

Here i'm stuck as how to proceed because of this CORS issue.. I found this topic on stackoverflow but that top answer with CORS proxy is for response to a direct URL. https://stackoverflow.com/questions/43871637/no-access-control-allow-origin-header-is-present-on-the-requested-resource-whe

If there is a way to use cors npm package in this case. https://www.npmjs.com/package/cors Can someone explain how?

Any solution would be appreciated. OR if someone can explain how to use this package properly in back-end without this cors issue.

Thanks

@JuanCrg90 @t3chnoboy