This is the first day of my participation in the August More text Challenge. For details, see: August More Text Challenge.

First, react to solve cross-domain

1. Configure the proxy mode in 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"
Copy the code

Then, in the page, the request can be automatically brokered without entering the domain name to solve the cross-domain problem

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

The effect is as follows:

2. Use http-proxy-middleware to configure a proxy group

Start by installing http-proxy-middleware

npm i http-proxy-middleware
Copy the code

Then create setupproxy.js in the SRC directory

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

module.exports = function (app) {
    app.use('/api',createProxyMiddleware(
        {
            target: 'http://vueshop.glbuys.com'.changeOrigin: true.// pathRewrite: {
            // "^/ API ": "// Make/API null
            // }}))// app.use('/test',createProxyMiddleware(
    / / {
    // target: 'http://vueshop.test.com',
    // changeOrigin: true,
    // // pathRewrite: {
    // // "^/ API ": "// Make/API empty
    / / / /}
    / /}
    // ))
}
Copy the code

Effect, cross domain success

3. Use webpackDevServer. Config. Do cross-domain js

Again, you don’t need to install HTTP-proxy-middleware and setupproxy.js

2. Automatically distinguish between development environment and production environment

1. Create a config directory

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

export default  {
    baseUrl: process.env.NODE_ENV === 'production' ? productionUrl : devUrl,
    path: '/'
}
Copy the code

2. Change the prefix of the interface to automatic identification environment

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

// Get the list of recommendations
request(`${config.baseUrl}/home/index/nav? token=1ec949a15fb709370f`)
            .then(res= >{
                console.log(res,'5677')
                if(res.code === 200) {
                    this.setState({
                        navs: res.data
                    })
                }
            })
     
 // User name and password for login
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)
                }
            })
            
    // Upload the image
    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
                    })
                }
            })
 
Copy the code

Development environment effect

3. Test the production mode

First NPM run build package and then serve -s build run the package locally (install serve first if not)

Development and production environments are automatically identified successfully