added request header to allow cross site origin in the api call

12q1 commented 3 years ago

Type of change:

[ *] Bugfix (non-breaking change which fixes an issue)
[ ] New feature (non-breaking change which adds functionality)
[ ] Breaking change (fix or feature that would cause existing functionality to not work as expected)
[ ] Styling - no new features

Why is this change required? What problem(s) does it solve?

Basically your browser prevents websites (your heroku site) from accessing external websites (in this case the API) for security reasons. You need to explicitly grant permission. That's why you are seeing a CORS policy issue on your heroku site even when it works on your local dev version.

Were there any challenges while implementing this feature? If so, how were they addressed?

The API is hard coded to only accept requests from 'http://blackstoriesmatter.herokuapp.com' so I cannot test it directly myself. Check line 44. But I have run your app in development mode on my own machine and confirmed that the request header is present. See screenshot

If that still doesn't work you can replace try replacing the API url with '*'. The star symbol is a wildcard character that basically says 'allow any url'.

Where should the reviewer start? How can this be tested?

Merge the pull request, run the dev version locally, confirm that the Access-Control-Allow-Origin header is present in the fetch request, try deploying it on heroku using your normal deployment method.

Link issues

https://github.com/Black-Stories-Matter/black-stories-matter-fe/issues/5

laurenlucero commented 3 years ago

Screen Shot 2020-10-20 at 12 10 20 PM Thank you @12q1 for the detailed PR! I'm still getting an access to fetch error in heroku after updating the API URL to * @kristastadler any additional thoughts?

12q1 commented 3 years ago

@laurenlucero Not sure where the issue is happening, could be because the API is only allowing requests from http://blackstories... but your request is originating from https://blackstories... You may need to allow https rather than just http because they are different protocols.

/config/applications.rb

allow do
        origins 'http://blackstoriesmatter.herokuapp.com'
        resource '*', :headers => :any, :methods => [:get, :post, :put, :delete, :options]
      end

More info on same origin policy

Black-Stories-Matter / black-stories-matter-fe