26 lines
1.3 KiB
Plaintext
26 lines
1.3 KiB
Plaintext
Setting up a CORS proxy in a Vue.js application is typically done during development to bypass Cross-Origin Resource Sharing (CORS) restrictions. This is achieved using the devServer.proxy option in your vue.config.js file.
|
|
Steps to set up a CORS proxy in Vue.js:
|
|
Create vue.config.js: If you don't already have one, create a vue.config.js file in the root of your Vue project (at the same level as package.json).
|
|
Configure the proxy: Add the devServer.proxy configuration within module.exports in vue.config.js.
|
|
JavaScript
|
|
|
|
// vue.config.js
|
|
module.exports = {
|
|
devServer: {
|
|
proxy: {
|
|
// Proxy all requests starting with '/api' to your backend server
|
|
'^/api': {
|
|
target: 'http://localhost:3000', // Replace with your backend server URL
|
|
changeOrigin: true, // Needed for virtual hosted sites
|
|
// pathRewrite: { '^/api': '' } // Optional: Remove '/api' prefix from the request path sent to the backend
|
|
},
|
|
// You can add more proxy rules for different paths if needed
|
|
// '^/another-path': {
|
|
// target: 'http://another-backend.com',
|
|
// changeOrigin: true,
|
|
// },
|
|
},
|
|
// For simpler cases where you want to proxy all unknown requests to a single backend
|
|
// proxy: 'http://localhost:4000',
|
|
},
|
|
}; |