webpack-dev-server CORS
时间: 2023-09-01 11:11:38 浏览: 55
Webpack Dev Server默认启用同源策略,即只允许来自同一域名下的请求访问资源。如果你需要跨域访问资源,可以通过配置webpack-dev-server的proxy选项来实现。
例如,在webpack-dev-server的配置文件中加入以下代码即可实现CORS跨域访问:
```
devServer: {
proxy: {
'/api': {
target: 'http://localhost:3000',
pathRewrite: {'^/api' : ''}
}
}
}
```
上述配置将所有以/api开头的请求代理到http://localhost:3000上,并将/api前缀去掉。这样,你就可以通过跨域访问http://localhost:8080/api下的资源了。
相关问题
devServer设置cors
在webpack中配置devServer的时候,可以通过设置`headers`来实现CORS(跨域资源共享)。
以下是一个示例配置:
```js
devServer: {
headers: {
'Access-Control-Allow-Origin': '*',
'Access-Control-Allow-Headers': 'Content-Type',
},
},
```
这里的`Access-Control-Allow-Origin`设置了允许所有域名的请求,`Access-Control-Allow-Headers`设置了允许请求头为`Content-Type`的请求。你也可以根据需要进行自定义设置。
需要注意的是,这种方法只是在开发环境下起作用,因为在生产环境中应该使用nginx等服务器去设置CORS。
express webpack 项目示例
以下是一个基于 Express 和 Webpack 的项目示例:
1. 首先,创建一个新的目录并初始化 npm:
```
mkdir my-project
cd my-project
npm init -y
```
2. 安装 Express 和相关依赖:
```
npm install express body-parser cors
```
3. 安装 Webpack 和相关依赖:
```
npm install webpack webpack-cli webpack-dev-middleware webpack-hot-middleware html-webpack-plugin
```
4. 创建一个 `src` 目录,并在其中创建一个 `index.js` 文件,作为 Express 应用的入口点:
```javascript
const express = require('express');
const bodyParser = require('body-parser');
const cors = require('cors');
const app = express();
app.use(bodyParser.json());
app.use(cors());
app.get('/', (req, res) => {
res.send('Hello, World!');
});
app.listen(3000, () => {
console.log('Server listening on port 3000');
});
```
5. 创建一个 `webpack.config.js` 文件,配置 Webpack:
```javascript
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
mode: 'development',
entry: './src/index.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js',
},
devServer: {
contentBase: './dist',
hot: true,
},
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html',
}),
],
};
```
6. 创建一个 `src/index.html` 文件,作为应用的 HTML 模板:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>My App</title>
</head>
<body>
<div id="root"></div>
<script src="bundle.js"></script>
</body>
</html>
```
7. 在 `package.json` 中添加以下脚本:
```json
{
"scripts": {
"start": "webpack-dev-server --open",
"build": "webpack"
}
}
```
8. 运行应用:
```
npm start
```
现在,你可以在浏览器中访问 http://localhost:8080,看到 "Hello, World!" 的输出。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)