【webpack配置】webpack跨域问题：实现跨域请求、express开启服务器..._webpack_前端技术

解决跨域问题三种方式：

1、服务端配置跨域访问（本文中服务器是express服务器）

2、proxy代理，将请求代理到其它服务器上（本文中的服务器是自己写的express本地服务器）

3、我们前端只想单纯来模拟数据，利用webpack-dev-server

4、express服务端中直接启用webpack，共用一个端口

一、nodeJs如何开启一个express服务器

首先下载express: npm install express -S

然后新建server.js文件

// server.js

// 引入express中间件
let express = require('express');
let app = express();

// 定义api 发送数据
app.get('/api/user', (req, res) => { // 若要使用post请求 改为post即可
    res.json({ name: 'hahaha' })
})

// 监听服务端口
app.listen(8000);

代码书写完毕后，使用node server.js即可开启服务，这个时候我们打开浏览器输入端口url可以进行查看：

【webpack配置】webpack跨域问题：实现跨域请求、express开启服务器...

然后，我们在index.js中编写代码发送ajax请求到服务端口请求数据（备注：设定index.js运行在webpack-sev-server localhost:8888端口下）

// index.js

let xhr = new XMLHttpRequest();

// 注意 此处如果我们直接写的是‘./api/user’的话 那么访问的是localhost：8888/api/user
xhr.open('GET', 'localhost:8000/api/user', true);

xhr.onload = function() {
    console.log(xhr.response);
}

xhr.send();

这样的话，一个运行在localhost:8888端口下，一个运行在localhost:8000端口下，就会产生跨域报错：

【webpack配置】webpack跨域问题：实现跨域请求、express开启服务器...

跨域报错情况下，我们可以采用以下方法解决：

1、express服务端配置跨域访问

// server.js

// 引入express中间件
let express = require('express');
let app = express();

--------  以下为新增部分  --------

app.all('*', function (req, res, next) {

　　res.header('Access-Control-Allow-Origin', '*');

　　res.header('Access-Control-Allow-Credentials', true);

　　res.header('Access-Control-Allow-Headers', 'Content-Type,Content-Length, Authorization, Accept,X-Requested-With')

　　res.header('Access-Control-Allow-Methods', 'PUT,POST,GET,DELETE,OPTIONS');

　　res.header('Content-Type', 'application/json;charset=utf-8');

　　next()

});

--------  以上为新增部分  --------


// 定义api 发送数据
app.get('/api/user', (req, res) => { // 若要使用post请求 改为post即可

    res.json({ name: 'hahaha' })
})

// 监听服务端口
app.listen(8000);

参考网址：Express简单起一个本地服务器

2、proxy代理：webpack-dev-serve服务器代理中转

上面有提到，当我们写'./api/user'的话，访问的是localhost:8888/api/user，这时候我们就可以利用webpack-dev-server进行中转。

webpack.config.配置项如下：

// webpack.config.js

module.exports = {
　　// ...
　　devServer: {
 　　　// 配置一个代理
　　　　proxy:{
　　　　　　'/api': {
　　　　　　　　target: 'http:localhost:8000', // 目标地址 访问的/api开头的地址 就转到localhost:8000去
　　　　　　　　pathRewrite: {'./api', ''} // 重写 将api字段替换成空 比如index.js中访问’./api/user‘,
　　　　　　　　但是后端server.js中配置的是'./user'，那么就可以用这种重写的方式
　　　　　　}
　　　}
　}
}

除了上述两种方法之外，有的时候我们前端只想单纯来模拟数据该怎么办呢？

我们需要知道，webpack-dev-server内部就是一个express，所以可以直接利用它。

3、利用webpack-dev-server单纯模拟数据这种方法也不存在跨域了

webpack.config.js配置：

module.exports = {
　　devServer: {
　　　　before(app) { // 提供的方法 钩子
　　　　　　app.get('./user', (req, res) => {
　　　　　　　　res.json('hahaha');
}

接下来还介绍最后一种方法：

4、express服务器开启webpack 前端和后端启动在同一个服务端口（借用webpack-dev-middleware中间介）

server.js：

// express

let express = require('express');
let app = express();
let webpack = require('webpack');

// 记得下载webpack中间介 可以让我们在服务端开启webpack
// 指令： npm i webpack-dev-middleware
let middle = require('webpack-dev-middleware');

let config = require('./webpack.config.js');

let compiler = webpack('config');

app.use(middle(compiler));

app.get('/user', (req, res) => {
　　res.json({name: hahaha})
})

app.listen(3000);

之后，直接运行node server.js开启，然后浏览器打开localhost://3000可进行查看。

查看更多关于【webpack】的文章