X-Socket-Id header using forceTLS as false break axios cors

[allanmcarvalho]

• Echo Version: 1.14.0
• Laravel Version: 9.27.0
• PHP Version: 8.1.1
• NPM Version: 8.11.0
• Node Version: 16.16.0

Description:

My bootstrap.js:

import _ from 'lodash';
window._ = _;

/**
 * We'll load the axios HTTP library which allows us to easily issue requests
 * to our Laravel back-end. This library automatically handles sending the
 * CSRF token as a header based on the value of the "XSRF" token cookie.
 */

import axios from 'axios';
import Echo from 'laravel-echo';
import Pusher from 'pusher-js';

window.axios = axios;
window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';

window.Pusher = Pusher;

/**
 * Echo exposes an expressive API for subscribing to channels and listening
 * for events that are broadcast by Laravel. Echo and event broadcasting
 * allows your team to easily build robust real-time web applications.
 */
window.Echo = new Echo({
    broadcaster: 'pusher',
    key: import.meta.env.VITE_PUSHER_APP_KEY,
    wsHost: import.meta.env.VITE_PUSHER_HOST,
    wsPort: import.meta.env.VITE_PUSHER_PORT,
    wssPort: import.meta.env.VITE_PUSHER_PORT,
    forceTLS: (import.meta.env.VITE_PUSHER_SCHEME ?? 'https') === 'https',
    enabledTransports: ['ws', 'wss'],
    disableStats: true,
});

I'm using the 'beyondcode/laravel-websock' and it's working fine. It is configured on a local machine, without SSL, so, the forceTLS is false in(import.meta.env.VITE_PUSHER_SCHEME ?? 'https') === 'https' because my scheme is 'http'. The websocket works, but Echo configuration broken my youtube api call under axios.

I know that this is a problem with X-Socket-id, because when I comment the line config.headers['X-Socket-Id'] = _this2.socketId(); of code below it works.

axios.interceptors.request.use(function (config) {
        if (_this2.socketId()) {
          config.headers['X-Socket-Id'] = _this2.socketId();
        }

        return config;
      });

When I don't do this, I receive a error on edge console: Access to XMLHttpRequest at 'https://www.googleapis.com/youtube/v3/search?key=API_KEY&channelId=CHANNEL&part=snippet%2Cid&order=date&maxResults=20' from origin 'http://site.pc.localhost' 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.

Steps To Reproduce:

1. On local machine without SSL, with pusher configured as http scheme and forceTLS: false, you cannot do a request to youtube api.
2. If you enable the forceTLS it work, but the websocket stops to work due a misconfigured certificate.

I believe that it work with forceTLS because it cannot connect to websocket, so, the header X-Socket-Id isn't present. When it is present, I get this error from API... I don't know if others API has this problem.

[allanmcarvalho]

I don't know much about the implementation of this package and the real use of this header (X-Socket-Id), but maybe if it were inserted in requests directly related to the application and/or to the websocket server the problem would be solved. It seems like something really unwanted. I don't see why inserting this header in a request to Google.

[allanmcarvalho]

on #152 this problem was happened. The option disableAutoRegisterInterceptors was the solution at that time. Exists something to resolve this in the package that I don't know?

[allanmcarvalho]

The solution that @stephan-v suggested at that time continues to work...

let url = 'https://www.googleapis.com/youtube/v3/searchkey=API_KEY&channelId=CHANNEL&part=snippet%2Cid&order=date&maxResults=20';
axios.get(url.href, {
    transformRequest: [function (data, headers) {
        delete headers['X-Socket-Id'];
        return data;
    }],
})

But I believe that this isn't the best approach to resolve this way of problem.

[driesvints]

Hi there,

Thanks for reporting but it looks like this is a question which can be asked on a support channel. Please only use this issue tracker for reporting bugs with the library itself. If you have a question on how to use functionality provided by this repo you can try one of the following channels:

• Laracasts Forums
• Laravel.io Forums
• StackOverflow
• Discord
• Larachat
• IRC

However, this issue will not be locked and everyone is still free to discuss solutions to your problem!

Thanks.