webpack을 사용하여 역방향 프록시를 설정하는 방법

이번에는 webpack을 사용하여 역방향 프록시를 설정하는 방법과, webpack을 사용하여 역방향 프록시를 설정하는 경우 주의 사항이 무엇인지 보여드리겠습니다. 다음은 실제 사례입니다.

1. 프록시 설정 이유

요즘은 프론트엔드 개발에 대한 요구사항이 점점 더 높아지고 있으며, 자동화와 모듈화의 탄생으로 프론트엔드와 백엔드 개발 모델이 대두되고 있습니다. 점점 더 대중화되고 있습니다. 백엔드는 인터페이스만 담당하고, 프런트엔드는 데이터 표시 및 논리 처리를 담당합니다. 그러나 프론트엔드와 백엔드 개발 모델에는 중요한 문제가 있는데, 바로 크로스 도메인 문제입니다.

2. 웹팩 프록시 구성 방법

웹팩 프록시에는 다른 플러그인이 필요합니다: webpack-dev-server

webpack-dev-server 프록시만 구성하면 매우 편리합니다. 프록시 속성을 조건으로 설정한 다음 관련 매개변수를 구성하면 됩니다.

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,
    contentBase: "./",
    quiet: false, //控制台中不输出打包的信息
    noInfo: false,
    hot: true, //开启热点
    inline: true, //开启页面自动刷新
    lazy: false, //不启动懒加载
    progress: true, //显示打包的进度
    watchOptions: {
      aggregateTimeout: 300
    },
    port: '8088', //设置端口号
    //其实很简单的，只要配置这个参数就可以了
    proxy: {
      '/index.php': {
        target: 'http://localhost:80/index.php',
        secure: false
      }
    }
  } 
..........
};

위의 예에서는 로컬 포트 ​​번호를 8088로 설정합니다. 현재 인터페이스가 포트 80을 사용하는 서버에 배치되어 있고 우리가 요청하는 인터페이스 URL은 다음과 같습니다: http://localhost :80/index.php

이때 정규식을 사용하여 프록시의 /index.php를 일치시킨 다음 대상 인터페이스 세트와 일치시키기만 하면 됩니다. 리디렉션 대상에 따라 이때 ajax 요청 인터페이스를 사용할 때 대상 인터페이스의 도메인 이름을 쓰지 않고 index.php만 작성하면 됩니다.

 $.ajax({
    type: 'GET',
    url: '/index.php',
    data: {},
    dataType: 'json',
    beforeSend: function () {
    },
    success: function (data) {
    },
    error: function (error) {
    }
  });

이 기사의 사례를 읽으신 후 방법을 마스터하셨다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!

추천 도서:

json 개체를 정렬하고 동일한 ID를 가진 데이터를 삭제하는 방법

실제 프로젝트에서 mvvm-simple 양방향 바인딩을 수행하는 방법

위 내용은 webpack을 사용하여 역방향 프록시를 설정하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!