Issue making cross origin requests

[DoctaCloak]

Hey I had a quick question, say I have an SPA running on port 8080 and I want to make a cross origin request to my vite plugin mock dev server which is running on port 9001, how would I go about doing so without getting a CORS error?

Normally when you want to do this with a node server you invoke cors() but that doesn't seem to be an option in my case and I can't get access to your express app to use app.use(cors())

I have the following API endpoint that when calling it directly via POSTMAN works just fine but when making this GET request on the SPA that's on a different origin that doesn't seem to work.

import path from 'path';

import {defineMock} from 'vite-plugin-mock-dev-server';

const MOCK_SERVICE_DATA_FILES = {
  AUTH_TOKEN: path.resolve('./mock/data/auth/jwt.json'),
};

export default defineMock({
  url: '/dashboardConfigs/:programId',
  response: async (request, response) => {
    console.debug('Incoming request', request);
    const data = await fs.readFile(MOCK_SERVICE_DATA_FILES.AUTH_TOKEN);

    response.end(data.toString());
  },
  status: 200,
});

Would appreciate any help on this 🙂

[pengzhanbo]

@DoctaCloak
viteConfig.server.cors = true did not take effect because in the internal implementation of vite, the middleware cors and proxy are added in the same code block. The plugin-mock needs to intercept requests before proxy. Therefore, the interception node of plugin-mock needs to be earlier than that of cors and proxy, which causes a response to be returned by plugin-mock before reaching  cors.

Currently, a temporary solution is to add headers related to cross-domain in mock config:

{
    "access-control-allow-credentials": "true",
    "access-control-allow-origin": "*",
    "access-control-allow-headers": "X-Requested-With,Content-Type",
    "access-control-allow-methods": "*"
}

The logic can be reused in more configurations through createDefineMock provided by plugins:

// mock/shared.ts
import { createDefineMock } from 'vite-plugin-mock-dev-server'

export const defineCorsMock = createDefineMock((mock) => {
	const headers = mock.headers || {}
	mock.headers = {
	'access-control-allow-credentials': 'true',
	'access-control-allow-origin': '*',
	'access-control-allow-headers': 'X-Requested-With,Content-Type',
	'access-control-allow-methods': '*',
	...headers,
	}
	return mock
})

// mock/api.mock.ts
import { defineCorsMock } from './shared'

export default defineCorsMock({
    url: '/api/cors'
})

With the method of creating custom mock conversion function using createDefineMock(transformer), it returns a function with the same usage as that of  defineMock.

[pengzhanbo]

@DoctaCloak Starting from version v1.2.0, the mock interface supports cross-domain by default.