locked
CORS Erros MVC RRS feed

  • Question

  • User197255166 posted

    Hi,

    Where am i making a mistake. I get the following error in a project. How can I resolve this error. I would be glad if you could help by examining the document.

    Access to fetch at 'https://checkoutshopper-test.adyen.com/checkoutshopper/v1/analytics/log?clientKey=test_api key' from origin 'https://localhost:44391' 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. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

    https://docs.adyen.com/online-payments/drop-in-web

    https://docs.adyen.com/development-resources/client-side-authentication

     async function initCheckout() {
            try {
                const configuration = {
                    paymentMethodsResponse: paymentMethodsResponse,
                    clientKey: "test api key",
                    locale: "en_US",
                    environment: "test",
                   
                    onSubmit: (state, component) => {
                        if (state.isValid) {
                            handleSubmission(state, component, "@Url.Action("GoToConfirm", "TscPayment")");
                        }
                    },
                    onAdditionalDetails: (state, component) => {
                        handleSubmission(state, component, "/api/submitAdditionalDetails");
                    },
    
                };
                const checkout = new AdyenCheckout(configuration);
                const dropin = checkout.create('dropin').mount('#dropin-container');
            }
    
            catch (error) {
                console.log('Error', error);
                alert("Error occurred. Look at console for details");
            }
        }
    
        function filterUnimplemented(pm) {
            pm.paymentMethods = pm.paymentMethods.filter((it) =>
                [
                    "ach",
                    "scheme",
                    "dotpay",
                    "giropay",
                    "ideal",
                    "directEbanking",
                    "klarna_paynow",
                    "klarna",
                    "klarna_account",
                ].includes(it.type)
            );
            return pm;
        }
    
        // Event handlers called when the shopper selects the pay button,
        // or when additional information is required to complete the payment
        async function handleSubmission(state, component, url) {
            try {
                const res = await callServer(url, state.data);
                handleServerResponse(res, component);
            }
            catch (error)
            {
                console.log('Error', error);
                alert("Error occurred. Look at console for details");
            }
        }
    
        // Calls your server endpoints
        async function callServer(url, data) {
            const res = await fetch(url, {
                method: "POST",
                body: data ? JSON.stringify(data) : "",
                headers: {
                    "Content-Type": "application/json",
                },
            });
    
            return await res.json();
        }
    
        // Handles responses sent from your server to the client
        function handleServerResponse(res, component) {
            if (res.action) {
                component.handleAction(res.action);
            } else {
                switch (res.resultCode) {
                    case "Authorised":
                        window.location.href = "/Home/Result/success";
                        break;
                    case "Pending":
                    case "Received":
                        window.location.href = "/Home/Result/pending";
                        break;
                    case "Refused":
                        window.location.href = "/Home/Result/failed";
                        break;
                    default:
                        window.location.href = `/Home/Result/error?reason=${res.resultCode}`;
                        break;
                }
            }
        }
    
    
        initCheckout();

    Controller

       [HttpPost]
            public ActionResult GoToConfirm(FormCollection form)
            {
               return RedirectToAction("Bit", new { order = orderid,para = para , type = type,issuer=adyen.issue });
    }

    Controller

     [HttpPost]
            public ActionResult Bit(string order, decimal para, string type, string issuer)
            {
    }

    Friday, April 30, 2021 8:23 AM

All replies

  • User475983607 posted

    CORS is must be enable on the checkoutshopper-test.adyen.com site.  Contact checkoutshopper-test.adyen.com support for assistance. 

    Change the TscPaymen/bit action to [HttpGet].  A redirect causes the browser to do a GET not a POST. 

    Friday, April 30, 2021 11:07 AM
  • User197255166 posted

    Hi,

    I did HttpGet and it didn't happen again.

    So will their support team solve this problem?

    There is nothing about the solution in the document, right?

    Friday, April 30, 2021 12:25 PM
  • User475983607 posted

    Aliyilmaz

    So will their support team solve this problem?

    There is nothing about the solution in the document, right?

    The best advice is taking the time to learn how CORS security works.  

    https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS

    Honestly, I have no idea if checkoutshopper-test.adyen.com will enable CORS or if you are using the correct URL.  

    Friday, April 30, 2021 12:48 PM
  • User-474980206 posted

    The docs clearly state that your server is supposed to call their website, not the client code.

    Friday, April 30, 2021 2:38 PM
  • User197255166 posted

    Hi,

    Well, this infrastructure is not .NET Core? My infrastructure is .NET Framework 4.5.1. In this case, what should I do?

    Monday, May 3, 2021 2:00 PM
  • User475983607 posted

    Well, this infrastructure is not .NET Core? My infrastructure is .NET Framework 4.5.1. In this case, what should I do?

    Find another payment service if Adyen does not work for you.

    Monday, May 3, 2021 2:07 PM
  • User-474980206 posted

    Hi,

    Well, this infrastructure is not .NET Core? My infrastructure is .NET Framework 4.5.1. In this case, what should I do?


    They have a defined rest api callable from any framework. They also have a .netstandard 2.0 sdk usable from 4.6.1. Why are you using an out of support framework (support stopped Jan 2016)?

    Monday, May 3, 2021 2:37 PM
  • User197255166 posted

    Hi,

    The project was done that way. There is no other way how to do this.

    Tuesday, May 4, 2021 7:06 AM
  • User475983607 posted

    Aliyilmaz

    The project was done that way. There is no other way how to do this.

    Can you clarify your response?  The project was working and stopped unexpectedly?   The project never worked?  The project stopped working after you made changes?

    Tuesday, May 4, 2021 10:36 AM
  • User197255166 posted

    No, this is the project infrastructure. I have no chance of updating. What I want to ask is, can't I do it with my infrastructure?

    I need to have the 4.6.1 version for sure.

    It works if I do it the classical way. But when I try to integrate the system in the link, I get the error I wrote.

    https://docs.adyen.com/online-payments/drop-in-web

    Tuesday, May 4, 2021 11:03 AM
  • User-474980206 posted

    If you can not upgrade to a supported framework, then you will need to use httpclient to call the rest api rather than use the sdk. 

    Tuesday, May 4, 2021 2:29 PM
  • User197255166 posted

    How can i use it. Did you see this in the document?

    Wednesday, May 5, 2021 7:52 AM