How to Fix The Cors Error with a Reverse Proxy

Поделиться
HTML-код
  • Опубликовано: 23 ноя 2024

Комментарии • 39

  • @jasonb202020
    @jasonb202020 2 года назад +3

    BRILLIANT! the best Vue/Cors issue resolution on the Web. Thanks Craig!

  • @putishestvuj4062
    @putishestvuj4062 9 месяцев назад

    Thank you for your relaxed and calm explanation! Enjoyed!

  • @martinnyagah4313
    @martinnyagah4313 3 года назад +2

    I am subbed. Keep doing this you are going to gain a subscriber count soon! This by far is the best and the only realistic, executable solution I needed.

    • @craiggoescoding
      @craiggoescoding  3 года назад

      Thanks for the support, I'm glad you found the video useful.

  • @myko_chxn
    @myko_chxn 2 года назад +3

    Great video, was getting cors error on my react app, this goes through everything I think I need. Cheers man

  • @juanisidorogarcia1699
    @juanisidorogarcia1699 2 года назад

    Thank you very much for your video!
    I just started creating my application and I started having problems accessing the API and I couldn't solve the CORs. The reverse proxy has been the solution!!
    It is also safer and a great solution!
    Thank you very much for your video, thank you very much for your work! 🤗👌

  • @Vlad-sw4zd
    @Vlad-sw4zd Год назад

    Wow, just what I was looking for, ty!

  • @mydemo2808
    @mydemo2808 2 года назад

    Thanks man, great video to solve CORS issue. It will be great if you can make video for POST request as well. Thanks a lot.

  • @AlexUnderCMYK
    @AlexUnderCMYK 2 года назад +1

    Super clear and easy! thanks very much

  • @Zabrana91
    @Zabrana91 3 года назад +1

    Hello Craig,
    I just wanted to say THANK YOU!
    You helped me solving my problem on which i sat on for more than 3 days straight.
    I gave you a like :D
    Have a nice year 2021

  • @arnolouw7325
    @arnolouw7325 3 года назад

    Legend! Thanks Craig, exactly what I needed.

  • @OnlineCode
    @OnlineCode Год назад

    How can i make q= in the string to an variable which can be set by the user on the webpage, for example from bitcoin to ethereum, and the value is passed to the reverse proxy?

  • @saitarun3246
    @saitarun3246 2 года назад +1

    Great video, it was very helpful :)

  • @Vlad-sw4zd
    @Vlad-sw4zd Год назад

    9:20 wouldn't that be client's localhost though? Looks like we have to type an external frontend ip here, haven't we?

  • @elmenikmati
    @elmenikmati 2 года назад +1

    ¡Muchas gracias!, your video helps me a lot!

  • @eheads3891
    @eheads3891 2 года назад

    This is great man! How about adding the form data when using post? Thanks

    • @craiggoescoding
      @craiggoescoding  2 года назад +1

      The principle is the same; send a POST request to an express POST route in your reverse proxy (app.post) then use axios.post to post the data to your endpoint. Bear in mind that axios' POST method has a slightly different format to GET as it doesn't use a "params" object to send through data. You can see the format on the axios website: axios-http.com/docs/post_example

    • @eheads3891
      @eheads3891 2 года назад

      @@craiggoescoding thanks for your response Craig, your video was very helpful!

  • @noelcovarrubias7490
    @noelcovarrubias7490 3 года назад

    Hello craig, thank you so much!

  • @devdev8638
    @devdev8638 3 года назад

    Nice job from Algeria

  • @wendyderidder7185
    @wendyderidder7185 2 года назад

    Great video, it works for me with get requests, but I still get an error when using this with a post request. Same api url, just method: "POST". Do you have an idea on how to fix this?

    • @craiggoescoding
      @craiggoescoding  2 года назад

      You need to send a POST request to an express POST route in your reverse proxy (app.post) then use axios.post to post the data to your endpoint. Bear in mind that axios' POST method has a slightly different format to GET as it doesn't use a "params" object to send through data. You can see the format on the axios website: axios-http.com/docs/post_example

  • @snoowwe
    @snoowwe 2 года назад

    Won't this make it so that every request to my server will now be as if I got two requests? One for the server one for the reverse proxy.
    Is this scalable?

    • @craiggoescoding
      @craiggoescoding  2 года назад

      Great question!
      Firstly, your proxy doesn't have to be an Express server, it can be any server in any server side language; as long as it's not a request directly from the browser to the api you'll be fine. So, if you already have a server set up, you can use it as your proxy.
      Scalability is a different issue. You really have no choice but to send requests from server to server when you encounter a CORS issue, and generally you're going to be able to handle a very large number of requests because the data is usually a simple JSON response. However, if you're concerned that you're going to encounter a huge number of requests then you can go serverless and use something like AWS Lambda to host your proxy - which will scale to billions of requests, or you can opt for a content delivery network (CDN) which will cache responses in edge locations for a specified period (for an api you would probably opt for a few seconds), so requests aren't continually hitting your proxied API.

  • @muhammaddzikri4238
    @muhammaddzikri4238 Год назад

    thanks dude, u save me!

  • @supermango1757
    @supermango1757 4 года назад

    I wrote all of the code along with you in the video but I ended up getting this error when I ran the server: Error: Route.get() requires a callback function but got a [object Object]...... Anyone know what to do from here?

    • @craiggoescoding
      @craiggoescoding  4 года назад

      Hello,
      Without seeing your code it's difficult to tell you exactly what has happened, however, you can check out the working code on this channel's GitHub page: github.com/CraigGoesCoding/express-reverse-proxy

  • @denver_dalman
    @denver_dalman 2 года назад

    Thank you so much for this! I just have one problem.
    endpoint([\\/\\w\\.-]*\\) does not seem to include the query parameters. :( Do you know how to include them?

    • @craiggoescoding
      @craiggoescoding  2 года назад

      I do go through this in the video at 15:30. You can also check out the GitHub repo where I've refactored the code to handle the query params in a separate class: github.com/CraigGoesCoding/express-reverse-proxy/blob/fff6a32d09b3e14ef6d9855b2b4d68cee9a5b0e7/classes/AxiosParamsObject.js#L19

    • @denver_dalman
      @denver_dalman 2 года назад

      @@craiggoescoding Thank you so much! I totally forgot that it's included! I didn't see its importance the first time I followed the tutorial and went back here forgetting that I skipped the last part.
      You're a life saver! The repository works and everything works perfectly! I'm really really so glad right now! ^-^

  • @ravendfj
    @ravendfj 3 года назад +1

    Thanks a lot man!

  • @shivajivishnoi9721
    @shivajivishnoi9721 Год назад

    thank you very much

  • @givemeyourpath
    @givemeyourpath 2 года назад

    is using regex a good choice? Regarding security and stuff

    • @craiggoescoding
      @craiggoescoding  2 года назад

      The regex is just for pattern matching part of a url (i.e. if the url matches this pattern, then do this), so it shouldn't have any security implications at all.

    • @givemeyourpath
      @givemeyourpath 2 года назад

      @@craiggoescoding alright thank you 👍