2

1 year agoby Bhagyaraj Aj

Access-Control-Allow-Origin Laravel-Vuejs-Websockets

Hi, I had done a simple chat application with laravel Websockets In local it runs super cool. But when i tried to run on HEROKU,it shows access-control-allow-origin CORS policy

Access to XMLHttpRequest at 'http://sockjs.pusher.com/pusher/app/anyKey/2/7c6ekuks/xhr?protocol=7&client=js&version=4.3.1&t=1551116387163&n=24' from origin 'http://mysterious-beach-46504.herokuapp.com' 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.

And i wrote the middleware to access headers that I learned from your tutorial.But it cant be solved and showing the same issue.

Thanks,

2

Bhagyaraj Aj replied 1 year ago

0

Where to check for appurl on vuejs

88

Sarthak Shrivastava replied 1 year ago

1

Yes that middleware will also work.

But CORS problem will not occure for integrated vuejs. Please check for app url on .env file and also on vuejs

2

Bhagyaraj Aj replied 1 year ago

0

i had written middleware to handle cors

Integrated vuejs

88

Sarthak Shrivastava replied 1 year ago

1

Is that a Single Page App project or you are using laravel integrated vuejs ?

2

Bhagyaraj Aj replied 1 year ago

0

Thank you for your reply

But in local it works fine... i run these artisan commands pa serve pa websockets:serve

How can i configure it in heroku Platform

88

Sarthak Shrivastava replied 1 year ago

1

Yes this is related to CORS ( cross origin resource sharing).

This is common if you are requesting something ( generally via ajax (XHR ) request ).

It is actually for security reason so that no domain can request something from your site.

To solve it on your server you can install a cors package. I am listing two great package and you can choose any one.

  1. Cors by Barryvdh
  2. Cors by Spatie

Hope this will solve your problem.

Ask Question
Most Visited
Categories