Let's talk about the background of the whole thing first: Generally speaking, there is a cross domain problem when the front-end calls the back-end interface at the development stage.

1. Configure local nginx reverse proxy during non framework development

 First download locally nginx，Found later conf folder->nginx.conf

The configuration is as follows:

worker_processes  1;
events {
    worker_connections  1024;
}
http {
    include       mime.types;
    default_type  application/octet-stream;
    sendfile        on;
    keepalive_timeout  65;
    include conf.d/*.conf;
    proxy_cache off;
}

Then create a conf.d folder under the current folder. The reverse proxy file configured each time should end with. Conf. For example, dev-test.conf

server {
    listen           80;
    server_name       dev.test.com; # Whitelist domain name configured by the backend
    root /Users/yanzhe/yz/xinao/workspace/app-h5; # Local code storage location
    
	location ~ .(gif|htm|html|swf|js|css|jpg|jpeg|png|bmp|ico|wma|wmv|asf|mp3|mmf|zip|rar|flv|md|txt|woff|ttf|woff2|wav|apk|xls|docx|pdf)$ {
        index index.html index.htm;
    }

    location / {
       proxy_pass http://www.baidu.com; #  Back end interface
	}
}

If the comment text will report an error, please delete it

Last step: add the white list to the hosts file. As in my example, it should be configured to

127.0.0.1    dev.test.com

After the nginx service is configured according to the above steps, the command is nginx. If nginx has been started, every time the nginx file is modified, it needs to be restarted to take effect. The restart command is nginx -s reload; If you want to stop the nginx service, you can use the command nginx -s stop. After the nginx service is started, access dev.test Com can access the file content configured in nginx. At the same time, when requesting the back-end interface configured, the nginx service will be used, and there will be no cross domain problems.

Several points for attention: 1. Ask the backend for a white list; 2. Add the whitelist domain name to the hosts file.

Another supplementary knowledge point: mac modifies the hosts file. You can enter vim /etc/hosts on the command line, enter i, enter the modify file mode, press esc button after modification, and enter wq to exit and save the current file.

2. When developing with Vue cli

When Vue's scaffold is used to develop a project, the whole configuration becomes very simple. The following is a link to the reference document: https://cli.vuejs.org/zh/config/#devserver-proxy only needs to configure devServer in vue.config.js

  devServer: {
    host: "localhost",//Configure the operation host of the project
    port: 8080,//Configure the running port of the project
    //Configure proxy server to solve cross domain problems
    proxy: {
      // The function of '/ api' is to replace the baseURL. If I use localhost: 8080 here, I can directly use / api when the front-end requests
      //  '/ api' is only added when the front end requests, and the back end does not need to add the path / api
      "/api": {
        target: "http://xxx.com ", / / configure the background interface address to be replaced
        changOrigin: true, //Configuration allows changing Origin
        ws: true, // proxy websockets
        pathRewrite: {
          "^/api": "/",
          //pathRewrite: {'^/api': '/'} after rewriting, the url is http://localhost:8080/xxxx
          //pathRewrite: {'^/api': '/api'} after rewriting, the url is http://localhost:8080/api/xxxx
        },
      },
    },
  },

'/ API': {} is to tell node that I only use proxy if my interface starts with '/ API', so your interface should be written as / API / XX / XX Finally, the proxy path is: http://xxx.xx.com/api/xx/xx.
The function of pathRewrite is that the correct interface path does not have / api, so you need to use '^ / api': '/' to indicate that the api is removed when requesting an interface.

According to the information, the forward proxy is the proxy client, the reverse proxy is the proxy server, and nginx is the reverse proxy; Devserver proxy should be a forward proxy. It seems that the front end can ignore these two concepts.

If there is any error, please correct it in time.

last

I know that most junior and middle-level Java engineers want to improve their skills, often by groping for growth or signing up for classes, but for training institutions, the tuition fee is nearly 10000 yuan, which is really a lot of pressure. The self-study effect that is not systematic is inefficient and long, and it is easy to encounter the stagnation of ceiling technology!

Therefore, I have collected and sorted out a complete set of learning materials for Java development and sent it to you. The original intention is also very simple, that is, I hope to help friends who want to improve themselves by self-study but do not know where to start, and at the same time reduce everyone's burden.

Xiaobian has been encrypted: ahr0chm6ly9kb2nzlnfxlmnvbs9kb2mvrvrvm9asgxqzuvstlkwunc = = for security reasons, we have encoded the website through base64. You can get the website through base64 decoding.