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.