【广州前端】webpack 开发时跨域问题的解决 - 黑马程序员技术交流社区

一、设置代理的原因

现在对前端开发的要求越来越高，并且随着自动化以及模块化的诞生，前后端开发模式越来越流行。后端只负责接口，前端负责数据展示、逻辑处理。但是前后端开发模式，有一个重要的问题，就是跨域问题。

二、如何配置webpack的代理

webpack 内置了 http-proxy-middleware 可以解决请求的 URL 代理的问题
webpack代理需要另外一个插件：webpack-dev-server，webpack-dev-server配置代理非常的方便，只需要条件一个proxy属性，然后配置相关的参数就可以了：

[JavaScript] 纯文本查看 复制代码

var webpack = require('webpack');

var WebpackDevServer = require("webpack-dev-server");

var path = require('path');

var CURRENT_PATH = path.resolve(__dirname); // 获取到当前目录

var ROOT_PATH = path.join(__dirname, '../'); // 项目根目录

var MODULES_PATH = path.join(ROOT_PATH, './node_modules'); // node包目录

var BUILD_PATH = path.join(ROOT_PATH, './dist'); // 最后输出放置公共资源的目录

var HtmlWebpackPlugin = require('html-webpack-plugin');

var ExtractTextPlugin = require("extract-text-webpack-plugin");

var CopyWebpackPlugin = require('copy-webpack-plugin');





module.exports = {



    //项目的文件夹 可以直接用文件夹名称 默认会找index.js ，也可以确定是哪个文件名字

    entry: {

        app: ['./src/js/index.js'],

        vendors: ['jquery', 'moment'], //需要打包的第三方插件

        // login:['./src/css/login.less']

    },



    //输出的文件名,合并以后的js会命名为bundle.js

    output: {

        path: path.join(__dirname, "dist/"),

        publicPath: "http://localhost:8088/dist/",

        filename: "bundle_[name].js"

    },

    devServer: {

       historyApiFallback: true,

        noInfo: true, // 让控制台的输出数据尽量的少一些

        port: '8080', //设置端口号

        proxy: {

            '/api/*': {

                // 请求到 '/api' 下 的请求都会被代理到 target： http://api.xxx.com 中

                target: 'http://api.xxxx.com/v1',

                secure: false,

                changeOrigin: true,

                pathRewrite: { '^/api': '/' }

            }

        }



    }



};

注：使用的url 必须以/开始否则不会代理到指定地址

这个时候只需要在proxy使用正则表达式匹配/api,然后匹配到转向target设置的目标接口；这个时候使用ajax请求接口就不要写上目标接口的域名，只需要写上/api就可以了。

[JavaScript] 纯文本查看 复制代码

$.ajax({

        type: 'GET',

        url: '/api/xxx',

        data: {},

        dataType: 'json',

        beforeSend: function () {

        },

        success: function (data) {



        },

        error: function (error) {



        }

    });

上面ajax请求的时候proxy 代理就会自动转向target设置的接口路径：

http://localhost:8080/api/xxx