When we develop website applications, we may use the front-end and back-end separation strategy or request resources from other domain. At this time, we may trigger the network CORS block. Through this post, you will learn: ① How to solve CORS block in the Vue project development environment? ② How to solve CORS block in the production environment of website deployment?
Keywords: Vue , axios , request , get , post , CORS block.
Browser settings
In the development environment, when we use Vue axios to execute a network request, we may encounter CORS block error : Access to XMLHttpRequest at ‘http://xxxx.xxx.xxx’ from origin ‘http://xxx.xxx.xx’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.
CORS block can be simply solved by setting personal browser.
change target
Effect
Use the shortcut after adding the code to open the browser again, you can see the text “You are using an unsupported command-line flag –ignore-certificate-errors. Stability and security will suffer” at the top of the browser, that indicating the CORS modification is successful. . This method will lead to lower browser security, and the next section will introduce a better method.
Chrome effect
Code settings
Code settings to solve CORS block are divided into two situations: development environment and production environment.
Development environment
In the development environment, to avoid the CORS block, you need to modify the vue.config.js in the Vue project and the NetWorkService.js that execute the network request. After modifying vue.config.js, you need to stop and restart the entire Vue project to activate the modification.
vue.config.js
NetWorkService.js
Production environment
In a production environment, the NetWorkService.js that executes the request is modified as above. And the configuration of your requested website needs to be set. Take a website that uses Nignx proxy as an example. Assuming that the website domain is text.example.com, and the configuration file path to be modified will be : /www/server/panel/vhost/nginx/text.example .com.conf. You need to open the file and add redirect paths.
NetWorkService.js
website config
Summarize
Generally speaking, CORS block can be solved by modifying browser configuration or modifying project and website settings. The method of modifying the browser configuration is very simple, but we cannot require all users to modify the browser configuration, so it is recommended to avoid CORS block in the project and website. In the development environment, you need to modify vue.config.js and NetWorkService.js, as for the production environment, you need to modify the Nginx website configuration and NetWorkService.js.
