webpack4中,react 服务器端如何实现跨域操作?
问题描述
`
在服务器渲染过程中,总是跨域不成功,每次请求数据的地址会跑到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 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论