preface

As we all know, we often need to do front-end engineering locally when we do back-end separation projects, where the interface wants to pull real data from the server rather than local mock data, and where a local application accesses the remote interface directly, it will definitely run into cross-domain problems.

What is cross-domain? Multiple ways to implement cross-domain?

Here I will not introduce in detail, we baidu ha

Why front-end cross-domain

Generally speaking, the separation of front and back end project in large companies will be set by the background allows cross domain access, because the background setting allows cross domain, it is very simple and convenient, but in some cases, a small company, or you don’t cooperate with the work place the background, the front end is needed for configuration cross-domain request to convenient we use interface

Configuration in the VUE project

Take vue-CLI project as an example, in the webpack configuration file /config/index.js, since we are using it in the development environment, it is natural to configure the proxyTable attribute in dev, and configure it as follows:

  dev: {
    // Paths
    assetsSubDirectory: 'static',
    assetsPublicPath: '/'The <! ProxyTable --> proxyTable: {'/api': {
          target: 'http://www.abc.com'// Set the name and port number of the interface you call, and don't forget to add HTTP changeOrigin:true// Whether to cross-domain pathRewrite: {//'/api'Instead of the address in target, we use the API instead of // when we drop the interface, such as I want to call'http://www.abc.com/user/add', write directly'/api/user/add'Can be' '^/api':'/' } } }, // Various Dev Server settings host: '0.0.0.0', // can be overwritten by process.env.HOST port: 8080, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined autoOpenBrowser: false, errorOverlay: true, notifyOnErrors: true, poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions- /** * Source Maps */ // https://webpack.js.org/configuration/devtool/#development devtool: 'cheap-module-eval-source-map', // If you have problems debugging vue-files in devtools, // set this to false - it *may* help // https://vue-loader.vuejs.org/en/options.html#cachebusting cacheBusting: true, cssSourceMap: true },Copy the code

The configuration in the proxyTable property above has the effect of proxy a request from local port 8080 to the domain name http://www.abc.com

'http://localhost:8080/api'= = = >'http://www.abc.com/'
Copy the code

Note: the above Settings can only be used in the development environment, packaging will cause path problems

Note: Vue-cli provides proxy functionality that you can use only in a development environment. It (HTTP-server-middleware) depends on the Node environment. Production code should use NPM run build and put Dist on the Nginx server to configure proxy addresses on nginx

Cross-domain Settings for Vue project deployment to Nginx

This is not the end of it. Now we are deploying the project to Nginx, and the previously accessible interface is not available, so we need to set up nginx at this time.

Download nginx for Windows

  • Download address:Nginx.org/en/docs/win…
  • Select Download to go to the download version page

  • Select the stable version to download

  • The download directory is as follows

  • Cong file, open the nginx.congf file, and find the Listen property of the server object.

  • In nginx root contains the nginx. Exe, if there is a black window a flash, launch successful, access localhost: 80 a successful visit this page

  • If the access fails, the port may be occupied. Change the preceding port number, restart nginx, and access localhost:XXXX

Configuration of Vue project deployed on Nginx

  • Vue project to run NPM run build for project packaging remember that there is a need for local static resource files need webpack configuration as follows:
Find the build property assetsPublicPath in the index.js file under config:'/'   =>>>>>   assetsPublicPath: '/' 
Copy the code

Untils file under build add publicPath to vue-style-loader:'.. /.. / '
Copy the code

  • At this point, the packaged Dist file can be accessed without placing it in the server environment, and can be directly accessed by opening the index. HTML in the dist file directory
Static resources can be loaded without error, but API access will still report an errorCopy the code

  • Copy the contents of the packaged dist file into an HTML file in the Nginx file

Open the HTML file and empty the contents, paste the copied content inCopy the code

  • Cong file, open the nginx.congf file, find the Server property and add a configuration to it
	location /api {			
		proxy_pass http://localhost:4000/;			
	}
Copy the code

You want to go to that address and change it to the address you want to go toCopy the code

  • The above configuration is complete

Note: after modifying the nginx configuration, you must restart nginx.

Nginx simple operation command

nginx.exe -sStop // stop stops nginx quickly and may not save information about nginx.exe-sQuit // quit is a complete and orderly stop to nginx and save the information about nginx.exe-sReload // Run the nginx.exe command when the configurations are modified and need to be reloaded-sReopen // Reopen the log file nginx -v // Check the nginx versionCopy the code

The above is the configuration I used in the project, and there are some more advanced configurations that I haven’t touched on yet, for your reference