Vue cli cross-domain and online nginx reverse proxy configuration

The cross-domain problem of separating axios and connecting api before and after is shown in the figure:

Solution:

1. npm start local development environment solution:

Find proxyTable in webpack configuration file /config/index.js and enable proxy changeOrigin:true,

proxyTable: {
       '/api':{
        target:'http://xx.xx.xx.xx:5568',
        changeOrigin:true,
        pathRewrite:{
            '^/api': '/api'
        }
      }
    },

 

2. npm run build puts the dist online and solves it:

The server {} of the nginx configuration file xx.conf is added as follows:

location /api/ {
        # Forward requests under the /api path to the real backend server
        proxy_pass http://xx.xx.xx.xx:5568;

        # Pass the host header, the backend service program will receive your.domain.name, otherwise it will receive localhost:8080
        proxy_set_header Host $http_host;

        # Replace the path part in the cookie from /api to /service
        proxy_cookie_path /api /;

        # Replace the path part of the cookie from localhost:8080 to your.domain.name
        proxy_cookie_domain localhost:80 http://xx.xx.xx.xx:5568;
    }

 

restart nginx 

/etc/init.d/nginx reload

 api cross-domain access succeeded