create-react-app प्रॉक्सी केवल fetch api के साथ काम करता है लेकिन ब्राउजर

Question

में आसानी से नहीं मिलता है, मैं बंदरगाह 8080 पर चल रहे बैकएंड सर्वर के प्रॉक्सी अनुरोधों के लिए पोर्ट 3000 सेटअप पर चलने वाले बहुत छोटे बना-प्रतिक्रिया-एप का उपयोग कर रहा हूं। यदि मैं ब्राउज़र पता बार http://localhost:3000/api/me में डालता हूं तो मैं index.html पृष्ठ वापस प्राप्त करता हूं लेकिन यदि मैं /api/me प्राप्त करने के लिए fetch API का उपयोग करता हूं तो यह बैकएंड द्वारा कॉल करने का प्रयास करता है।

समस्या यह है कि मुझे बैकएंड के साथ प्रमाणित करना होगा जो एक कुकी सेट करेगा लेकिन चूंकि मैं http://localhost:3000/login पर लॉगिन पेज तक नहीं पहुंच पा रहा हूं, मुझे कुकी नहीं मिल सकती है।

एक अलग परियोजना जो मैं बनाने प्रतिक्रिया-ऐप से बेदखल कर दिया है मैं विन्यास

proxy: { 
    "*": "http://localhost:9191" 
    } 

जो प्रॉक्सी अनुरोध भी जब ब्राउज़र में डाल दिया करता wih webpack-देव-सर्वर को चलाने के लिए छोटे फ़ाइल है पर पता पट्टी।

क्या निर्माण-प्रतिक्रिया-ऐप में ऐसा सेटअप बनाना संभव है?

Answer 1

करीब create-react-app code में देखो पता चलता है कि इस डिजाइन के द्वारा होता है:

एकल पृष्ठ एप्लिकेशन के लिए, हम आम तौर पर /index.html पर वापस आने के लिए चाहते हैं। हालांकि हम एपीआई कॉल के लिए proxy का भी सम्मान करना चाहते हैं। तो यदि proxy निर्दिष्ट है, तो हमें यह तय करने की आवश्यकता है कि किस फ़ॉलबैक का उपयोग करना है। हम एक ह्युरिस्टिक का उपयोग करते हैं: अगर अनुरोध accept एस टेक्स्ट/एचटीएमएल, हम /index.html चुनते हैं। नेविगेट करते समय आधुनिक ब्राउज़रों में टेक्स्ट/एचटीएमएल accept हेडर शामिल है। हालांकि एपीआई कॉल fetch() आमतौर पर पाठ/एचटीएमएल स्वीकार नहीं करेंगे। यदि यह हेरिस्टिक आपके लिए अच्छा काम नहीं करता है, तो proxy का उपयोग न करें।

आरईएसटी कंसोल एक्सटेंशन के अंदर http://localhost:3000/api/me के चलते सही परिणाम लौटाएं।

इसके अलावा Fetch API and cookies बारे में पढ़ने से पता चलता है मैं पैरामीटर क्रेडेंशियल शामिल करने के लिए है कि: सच भेजने के लिए कुकीज़:

fetch('/api/me', { 
    credentials: 'include' 
}) 

Answer 2

मैं अपने खुद के एप्लिकेशन प्रतिक्रिया और मैं package.json करने के लिए प्रॉक्सी जोड़ने की कोशिश की है, लेकिन यह है काम कर रहा है

सरल निर्माण-प्रतिक्रिया-ऐप बस ठीक है, शीर्षक में कोई वेबपैक कॉन्फ़िगर नहीं किया गया है।

यहाँ मेरी webpack है:

const path = require('path') 

const HtmlWebpackPlugin = require('html-webpack-plugin'); 
const HtmlWebpackPluginConfig = new HtmlWebpackPlugin({ 
    template: './src/index.html', 
    filename: 'index.html', 
    inject: 'body' 
}) 

module.exports = { 
    entry: './src/index.js', 
    output: { 
     path: path.resolve('./dist'), 
     filename: 'index_bundle.js' 
    }, 
    module: { 
     loaders:[ 
      { 
       test: /\.js$/, 
       loader: 'babel-loader', 
       exclude: /node_modules/ 
      }, 
      { 
       test: /\.jsx$/, 
       loader: 'babel-loader', 
       exclude: /node_modules/ 
      }, 
      { 
       test: /\.css$/, 
       loader: "style-loader!css-loader?modules" 
      }, 
      { 
       test: /\.png$/, 
       loader: "url-loader?limit=100000" 
      }, 
      { 
       test: /\.jpg$/, 
       loader: "file-loader" 
      }, 
      { 
       test: /\.(woff|woff2)(\?v=\d+\.\d+\.\d+)?$/, 
       loader: 'url-loader?limit=10000&mimetype=application/font-woff' 
      }, 
      { 
       test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, 
       loader: 'url-loader?limit=10000&mimetype=application/octet-stream' 
      }, 
      {  
       test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, 
       loader: 'file-loader' 
      }, 
      { 
       test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, 
       loader: 'url-loader?limit=10000&mimetype=image/svg+xml' 
      } 
     ] 
    }, 
    resolve: { 
     extensions: ['.js', '.jsx' ,'.json'], 
     modules: [path.join(__dirname, 'src'), 'node_modules'] 
    }, 
    plugins: [HtmlWebpackPluginConfig] 
} 

मेरे package.json:

{ 
    "name": "A2ZPressMaterial", 
    "version": "1.0.0", 
    "main": "index.js", 
    "license": "MIT", 
    "scripts": { 
    "start": "webpack-dev-server --history-api-fallback", 
    "webpack-watch": "webpack -w", 
    "express-server": "node ./server", 
    "dev": "concurrently --kill-others \"npm run webpack-watch\" \"npm run express-server\"", 
    "test": "echo \"Error: no test specified\" && exit 1" 
    }, 
    "proxy": "http://localhost:3001", 
    "dependencies": { 
    "classnames": "^2.2.5", 
    "css-loader": "^0.28.7", 
    "file-loader": "^0.11.2", 
    "html-webpack-plugin": "^2.30.1", 
    "http-proxy-middleware": "^0.17.4", 
    "material-ui": "^0.19.2", 
    "path": "^0.12.7", 
    "react": "^15.6.1", 
    "react-dom": "^15.6.1", 
    "react-lazyload": "^2.2.7", 
    "react-redux": "^5.0.6", 
    "react-router-dom": "^4.2.2", 
    "redux": "^3.7.2", 
    "redux-thunk": "^2.2.0", 
    "style-loader": "^0.18.2", 
    "url-loader": "^0.5.9", 
    "webpack": "^3.5.6", 
    "webpack-dev-server": "^2.8.1" 
    }, 
    "devDependencies": { 
    "babel-core": "^6.26.0", 
    "babel-loader": "^7.1.2", 
    "babel-plugin-transform-class-properties": "^6.24.1", 
    "babel-plugin-transform-runtime": "^6.23.0", 
    "babel-preset-es2015": "^6.24.1", 
    "babel-preset-react": "^6.24.1", 
    "babel-preset-stage-0": "^6.24.1", 
    "concurrently": "^3.5.0" 
    } 
} 

मैं अपने ajax पर 404 मिल/कॉल

लाने