Implementation method of different ports in front and back end of Vue

Front-end Vue 8080 port, back-end port 8085 port mainly records the problems encountered by different ports in the front and back ends.

1. Write a server-side program, mine is under (node_proxy/)

('*', function (req, res, next) {
 ('Access-Control-Allow-Origin',  || '*');
 ('Access-Control-Allow-Headers', 'Content-Type,Content-Length, Authorization,\'Origin\',Accept,X-Requested-With');
 ('Access-Control-Allow-Methods', 'GET, POST, OPTIONS, PUT, PATCH, DELETE');
 ('Access-Control-Allow-Credentials', true);
 ('X-Powered-By', ' 3.2.1');
 ('Content-Type', 'application/json;charset=utf-8');
 if ( === 'OPTIONS') {
 (200);
 } else {
 next();
 }
});

This code is very important. If not, there will be an error No 'Access-Control-Allow-Origin' header is present on the requested resource.

2. Write the get request handler using axios on the front end, and write it under the Card template.

mounted(){
 (HOST)
 .then(response => {
  = ;
 })
 }

3. Configure proxyTable under config/:

proxyTable: {
 '/seller': {
 target: 'http://localhost:8085',
 changeOrigin: true,
 pathRewrite: {
  '^/seller': '/seller'
 }
 }
 },

4. Start the front and back ends separately, OK~\(≧▽≦)/~Lalala~

The above article on the implementation methods of different ports in front and back end of Vue are all the content I have shared with you. I hope you can give you a reference and I hope you can support me more.