这是我参与8月更文挑战的第1天，活动详情查看：8月更文挑战。

一、react中解决跨域

1. 在package.json中配置代理模式

"devDependencies": {
  "babel-plugin-react-html-attrs": "^2.1.0",
  "react-router-dom": "^5.1.2",
  "redux-thunk": "^2.3.0"
},
"proxy": "http://vueshop.glbuys.com"
复制代码

然后在页面中，不要输入域名即可自动代理请求，从而解决跨域问题

request('/api/home/index/nav?token=1ec949a15fb709370f')
    .then(res =>{
        console.log(res,'5677')
        if(res.code === 200) {
            this.setState({
                navs: res.data
            })
        }
    })
复制代码

效果如下：

2. 使用 http-proxy-middleware 配置代理组

首先安装http-proxy-middleware

npm i http-proxy-middleware
复制代码

然后在src目录下新建 setupProxy.js

const {createProxyMiddleware } =  require('http-proxy-middleware')

module.exports = function (app) {
    app.use('/api',createProxyMiddleware(
        {
            target: 'http://vueshop.glbuys.com',
            changeOrigin: true,
            // pathRewrite: {
            //     "^/api": '' // 把/api 变成空
            // }
        }
    ))
    // app.use('/test',createProxyMiddleware(
    //     {
    //         target: 'http://vueshop.test.com',
    //         changeOrigin: true,
    //         // pathRewrite: {
    //         //     "^/api": '' // 把/api 变成空
    //         // }
    //     }
    // ))
}
复制代码

效果，跨域成功

3. 使用webpackDevServer.config.js 做跨域

一样的跨越成功，效果就不贴图了，这样可以不用安装http-proxy-middleware，也可以少建一个setupProxy.js

二、自动区分开发环境和生产环境

1. 新建一个config目录

const devUrl = '/api'
const productionUrl = 'http://vueshop.glbuys.com/api'

export default  {
    baseUrl: process.env.NODE_ENV === 'production' ? productionUrl : devUrl,
    path: '/'
}
复制代码

2.然后把之前写好的接口前缀，改成自动识别环境

import config from "../../assets/js/config";

// 获取推荐列表
request(`${config.baseUrl}/home/index/nav?token=1ec949a15fb709370f`)
            .then(res =>{
                console.log(res,'5677')
                if(res.code === 200) {
                    this.setState({
                        navs: res.data
                    })
                }
            })
     
 // 用户名密码登录    
request( `${config.baseUrl}/home/user/pwdlogin?token=1ec949a15fb709370f`, 'post', {
            cellphone: this.state.username,
            password: this.state.password
        }, 'login')
            .then(res => {
                if (res.data.code === 200) {
                    this.props.dispatch((dispatch) => {
                        dispatch(actions.user.login({username: this.state.username, isLogin: true}))
                        this.props.history.go(-1);
                    })
                } else {
                    alert(res.data)
                }
            })
            
    // 上传图片
    uploadFile(e) {
        console.log(e.target.files[0])
        let headfile = e.target.files[0]
        var uploadConfig = {
            onUploadProgress: (progressEvent) => {
                var percentCompleted = Math.round( (progressEvent.loaded * 100) / progressEvent.total );
                this.setState({
                    percentValue: percentCompleted
                })
            }
        };
        request(`${config.baseUrl}/user/myinfo/formdatahead?token=1ec949a15fb709370f`,'post',headfile,'file',uploadConfig)
            .then(res => {
                if(res.code === 200 ) {
                    this.setState({
                        showHead: 'http://vueshop.glbuys.com/userfiles/head/' + res.data.msbox
                    })
                }
            })
 
复制代码