13

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)

3 Answers 3

15

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

0
8

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},
});
0
0

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)
)

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.