이번에는 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!