CODEWITHSUNDEEP
node.jsajaxcorsrxjsrxjs6
Evan Carroll
Evan Carroll

Reputation: 1

Using rxjs ajax() I get "CORS is not supported by your browser"

Using Rxjs 6 I keep getting,

Error: CORS is not supported by your browser

My code is pretty simple,

import { ajax } from 'rxjs/ajax';

const ajax$ = ajax({
  url: genURL_chan(179),
  crossDomain: true,
  withCredentials: false,
  method: 'POST',
  body: { 'since': 0, 'mode': 'Messages', 'msgCount': 5000},
});

My code is pretty simple,

/node_modules/rxjs/internal/util/hostReportError.js:4
    setTimeout(function () { throw err; });
                             ^

Error: CORS is not supported by your browser
    at getCORSRequest (/node_modules/rxjs/internal/observable/dom/AjaxObservable.js:27:15)
    at Object.createXHR (/node_modules/rxjs/internal/observable/dom/AjaxObservable.js:93:43)
    at Object.tryCatcher (/node_modules/rxjs/internal/util/tryCatch.js:7:31)
    at AjaxSubscriber.send (/node_modules/rxjs/internal/observable/dom/AjaxObservable.js:159:50)
    at new AjaxSubscriber (/node_modules/rxjs/internal/observable/dom/AjaxObservable.js:147:15)
    at AjaxObservable._subscribe (/node_modules/rxjs/internal/observable/dom/AjaxObservable.js:116:16)
    at AjaxObservable.Observable._trySubscribe (/node_modules/rxjs/internal/Observable.js:43:25)
    at AjaxObservable.Observable.subscribe (/node_modules/rxjs/internal/Observable.js:29:22)
    at Object.<anonymous> (/index.js:17:7)
    at Module._compile (internal/modules/cjs/loader.js:702:30)

Upvotes: 13

Views: 5751

Answers (3)

KARTHIKEYAN.A
KARTHIKEYAN.A

Reputation: 20108

We can use new XMLHttpRequest() has part of request options

options.js

import merge from 'lodash/fp/merge'


const createXHR = () => new XMLHttpRequest()

export const DEFAULT_REQUEST_OPTIONS = {
    createXHR,
    headers: {
        Accept: 'application/json',
        'Content-type': 'application/json'
    },
    method: 'POST',
    timeout: 200000
}

export default merge(DEFAULT_REQUEST_OPTIONS)

request.js

import getOptions from '../../../../../services/utils/get-options'


export default (app, body) => getOptions({
    body,
    url: app.api.clientSearch
})

apiCall.js

import { ajax } from 'rxjs/ajax'
import { map, pluck, shareReplay, switchMap } from 'rxjs/operators'
import env$ from '../../../../services/env'
import request from './request'


export default args => env$.pipe(
    map(env => request(env, args)),
    switchMap(req => ajax(req)),
    pluck('response'),
    shareReplay(1)
)

Upvotes: 0

Ben Lesh
Ben Lesh

Reputation: 108491

You would need to put your createXHR function on your actual configuration passed to the ajax() call:

import { XMLHttpRequest } from 'xmlhttprequest'

function createXHR() {
  return new XMLHttpRequest();
}

const ajax$ = ajax({
  createXHR, // <--- here
  url: genURL_chan(179),
  crossDomain: true,
  withCredentials: false,
  method: 'POST',
  body: { 'since': 0, 'mode': 'Messages', 'msgCount': 5000},
});

Related: I answered your question the repository too, with a little more information: https://github.com/ReactiveX/rxjs/issues/3978#issuecomment-411472389

Upvotes: 15

Evan Carroll
Evan Carroll

Reputation: 1

For some reason there is a bug that was never really fixed. First you have to install xmlhttprequest,

npm install xmlhttprequest;

You have to edit that a bit and add one of these

## CommonJS
var XMLHttpRequest = require("xmlhttprequest").XMLHttpRequest;

## ES2015
import { XMLHttpRequest } from 'xmlhttprequest';

And, then put this in the call ajax(),

createXHR: function () {
  return new XMLHttpRequest();
}

Should look like this,

import { ajax } from 'rxjs/ajax';
import { XMLHttpRequest } from 'xmlhttprequest';

const ajax$ = ajax({
  url: genURL_chan(179),
  crossDomain: true,
  withCredentials: false,
  method: 'POST',
  body: { 'since': 0, 'mode': 'Messages', 'msgCount': 5000},
});

Upvotes: 8

Related Questions