webpack4中,react 服务器端如何实现跨域操作?

发布于 2022-09-11 14:47:34 字数 4252 浏览 18 评论 0

问题描述

`
在服务器渲染过程中,总是跨域不成功,每次请求数据的地址会跑到localhost:3000下
`

问题出现的环境背景及自己尝试过哪些方法

找过度娘和相关信息,没找到

相关代码

---package.json
`

{
  "name": "server",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "npm-run-all --parallel dev:**",
    "dev:start": "nodemon --watch build --exec node \"./build/bundle.js\"",
    "dev:build:server": "webpack --config webpack.server.js --watch",
    "dev:build:client": "webpack --config webpack.client.js --watch"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "axios": "^0.18.0",
    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.5",
    "babel-preset-env": "^1.7.0",
    "babel-preset-react": "^6.24.1",
    "babel-preset-stage-0": "^6.24.1",
    "express": "^4.16.3",
    "npm-run-all": "^4.1.3",
    "react": "^16.4.1",
    "react-dom": "^16.6.0",
    "react-redux": "^5.1.0",
    "react-router-dom": "^4.3.1",
    "react-thunk": "^1.0.0",
    "redux": "^4.0.1",
    "redux-thunk": "^2.3.0",
    "webpack": "^4.16.0",
    "webpack-cli": "^3.0.8",
    "webpack-merge": "^4.1.4",
    "webpack-node-externals": "^1.7.2",
    "webpack-dev-middleware": "^3.1.0",
    "webpack-dev-server": "^3.1.1",
    "webpack-hot-middleware": "^2.21.2"
  }
}

`
---webpack.base.js
`

const path = require('path');
const webpack = require("webpack");
const merge = require("webpack-merge");

module.exports = {
    module: {
        rules: [{
            test: /\.js?$/,
            loader: 'babel-loader',
            exclude: /node_modules/,//排除node_modules文件
            options: {
                presets: [
                    'react', 'stage-0',
                    ['env', {
                        targets: {
                            browsers: ['last 2 versions']
                        }
                    }]
                ]
            }
        }]
    },
    devServer: {
        contentBase: path.join(__dirname, "./public"),
        publicPath:'/',
        host: "127.0.0.1",
        port: "3000",
        overlay: true, // 浏览器页面上显示错误
        // open: true, // 开启浏览器
        // stats: "errors-only", //stats: "errors-only"表示只打印错误:
        hot: true, // 开启热更新
        //服务器代理配置项
        proxy: {
            '/api/*':{
                target: 'https://api.douban.com',
                secure: true,
                changeOrigin: true
            }
        }
    },
    plugins: [
        //热更新
        new webpack.HotModuleReplacementPlugin(),
        new webpack.DefinePlugin({
            'process.env.BASE_URL': '\"' + process.env.BASE_URL + '\"'
        })
          
    ],
    devtool: "source-map",  // 开启调试模式
}    

`
--webpack.client.js
`

const path = require('path');
const merge = require('webpack-merge');
const baseConfig = require('./webpack.base.js');

const clientConfig = {
    mode: 'development',
    entry: './src/client/index.js',
    output: {
        filename: 'index.js',
        path: path.resolve(__dirname, 'public')
    }
}

module.exports = merge(baseConfig, clientConfig)

`
---webpack.server.js
`

const path = require('path');
const nodeExternals = require('webpack-node-externals')
const merge = require('webpack-merge');
const baseConfig = require('./webpack.base.js');

const serverConfig = {
    target: 'node',//打包服务器代码
    mode: 'development',
    entry: './src/server/index.js',
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'build')
    },
    externals: [nodeExternals()]//辅助将服务端需要被打包的代码打包
}

module.exports = merge(baseConfig,serverConfig)    

`
---reducer.js
`

import axios from 'axios'

export const getHomeList = () => {
    return (dispatch) => {
       
        axios.get('/api/v2/movie/in_theaters').then((res)=>{
            
            console.log( res,'res')
            // dispatch(changeList(data))
        }).catch((err)=>{
            console.log(err,'error')
        })
    }
}

`

希望大佬帮我解决一下问题,谢谢了

GitHub: https://github.com/yyccQQu/Re...

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。
列表为空,暂无数据
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文