CODEWITHSUNDEEP
javascriptreactivecyclejs
willyab
willyab

Reputation: 325

cycle.js how to enable Access-Control-Allow-Origin (CORS)

Experimenting with the cyclejs javascript reactive frameworks and I'm new to the paradigm.

I've set up a stream to read from an external URL (en.wikipedia.org) and get the following result:

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://en.wikipedia.org/w/api.php?action=query&list=search&format=json&srsearch=. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing)

I understand why the error is returned. The server, node., in this case, is not setting the header

access-control-allow-origin: *

and the

Content-Type: application/json; charset=utf-8

will require the CORS constraint to be applied.

I have not been able to find where, how, or if, the node server adds the CORS header. The node Server.js code is there to do it but I need help in triggering the adding of the CORS header.

Thanks.

The package.json is:

{
  "name": "wikipedia",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "parcel -p 1235 index.html",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "cb",
  "license": "ISC",
  "dependencies": {
    "@cycle/dom": "^22.3.0",
    "@cycle/http": "^15.1.0",
    "@cycle/run": "^5.2.0",
    "npm": "^6.6.0",
    "xstream": "^11.10.0"
  },
  "devDependencies": {}
}

It makes no difference whether the node package cors is installed or not.

My headers are: 

=== Response headers (1.424 KB)  ===
accept-ranges: bytes
age: 0
backend-timing: D=149145 t=1547782329117450
cache-control: private, must-revalidate, max-age=0
content-disposition: inline; filename=api-result.json
content-encoding: gzip
content-length: 1409
content-type: application/json; charset=utf-8
date: Fri, 18 Jan 2019 03:32:09 GMT
p3p: CP="This is not a P3P policy! …lAutoLogin/P3P for more info."
server: mw1224.eqiad.wmnet
server-timing: cache;desc="pass"
set-cookie: WMF-Last-Access=18-Jan-2019;Pa…Tue, 19 Feb 2019 00:00:00 GMT
set-cookie: WMF-Last-Access-Global=18-Jan-…Tue, 19 Feb 2019 00:00:00 GMT
strict-transport-security: max-age=106384710; includeSubDomains; preload
vary: Accept-Encoding,Treat-as-Untru…,Cookie,Authorization,X-Seven
via: 1.1 varnish (Varnish/5.1), 1.1…1), 1.1 varnish (Varnish/5.1)
x-analytics: ns=-1;special=Badtitle;https=1;nocookies=1
x-cache: cp1079 pass, cp2012 pass, cp5007 pass, cp5008 pass
x-cache-status: pass
x-content-type-options: nosniff
X-Firefox-Spdy: h2
x-frame-options: SAMEORIGIN
x-powered-by: HHVM/3.18.6-dev
x-search-id: cfqpbykh6k905h7hol9taip2o
x-varnish: 494419235, 536993066, 474976751, 593813616


=== Request headers (362 B)  ===
Accept: */*
Accept-Encoding: gzip, deflate, br
Accept-Language: en-US,en;q=0.5
Connection: keep-alive
Host: en.wikipedia.org
Origin: http://localhost:1235
Referer: http://localhost:1235/
TE: Trailers
User-Agent: Mozilla/5.0 (X11; Ubuntu; Linu…) Gecko/20100101 Firefox/64.0

Upvotes: 0

Views: 810

Answers (2)

willyab
willyab

Reputation: 325

Thanks for pointing me in the right direction regards Wikipedia blocking the request. On further research, the solution was very simple. Add "&origin=*" to the request string and Wikipedia returns a CORS policy. That's it.

Upvotes: 1

Damian Dziaduch
Damian Dziaduch

Reputation: 2127

Wikipedia does not serve the required headers so the request is blocked. You can't change that. But you can use a cross origin proxy like this https://corsproxy.github.io

Upvotes: 0

Related Questions