Vue. js uses proxy and Nginx to solve cross-origin problems.

Vue. js uses proxy and Nginx to solve cross-origin problems.

Use Nginx reverse proxy to solve cross-origin problems (vue. js uses proxy to remove options requests triggered by vue. js due to cross-origin)

Our project still needs node. js as the container

1. Install Nginx in Windows(Official website download stable edition http://nginx.org/en/download.html)

2. Modify the server of the nginx. conf file in config

Server {listen 8899; // your port server_name localhost; root C:/ZOBSF_F/dist; // path of the file you packaged and deployed # charset koi8-r; # access_log logs/host. access. log main; # reverse proxy matching api routing to API service location ^ ~ /Api {proxy_pass http: // 119.23.227.141: 10001 //; // your backend IP address and port} # set according to the route, avoid the Error 404 location/{try_files $ uri/@ router; index index.html;} location @ router {rewrite ^. * $/index.html last ;}# error_page 404/404 .html; # redirect server error pages to the static page/50x.html # error_page 500 502 503 x.html; location =/50x.html {root html ;} # proxy the PHP scripts to Apache listening on 127.0.0.1: 80 # location ~ \. Php $ {# proxy_pass http: // 127.0.0.1; #}# pass the PHP scripts to FastCGI server listening on 127.0.0.1: 9000 # location ~ \. Php $ {# root html; # fastcgi_pass 127.0.0.1: 9000; # fastcgi_index index. php; # fastcgi_param SCRIPT_FILENAME/scripts $ fastcgi_script_name; # include fastcgi_params; #}# deny access. htaccess files, if Apache's document root # concurs with nginx's one # location ~ /\. Ht {# deny all ;#}}

3. The dist file in your uve. js package is as follows:

4. Add a project to start the configuration file server. production. js.

Var express = require ('express '); var app = express (); var compression = require ('compression'); var proxyMiddleware = require ('HTTP-proxy-middleware ') var history = require ('connect-history-api-fallback'); app. use (compression (); app. use (express. static (_ dirname); app. middleware = [// use proxy api proxyMiddleware (['/api'], {target: 'http: // 192.168.11.103: 100', changeOrigin: true, pathRewrite: {'^/api ':'/ ',},}),]; App. get ('*', function (req, res) {res. sendFile (_ dirname + '/index.html') ;}); app. use (history (); app. use (app. middleware); app. listen ('100', function (error) {console.info ("========================= the system is starting... ======================== "); if (error) {console. error (error)} else {console.info ("======================== 9999 the system has been started successfully !!! ========================== ")}});

5. Run the node server command in the project directory. production. js press enter to find that the package lacks dependencies. Use npm install [dependency component with error prompt] to include express, compression, http-proxy-middleware, and so on.

Start the project and you can access the address http: // localhost: 8080/xxx.

6. vue. js can use the proxy to Baidu (modify inde. js in the config configuration file)

ProxyTable: {'/api': {target: Host. host, // set the domain name and port number of the interface you call. Do not forget to add http changeOrigin: true, pathRewrite: {'^/api ': '/' // here it is understood that '/api' is used to replace the address in the target. When we drop the interface in the following components, we use an api instead. For example, I want to call 'HTTP: // 40.00.100.100: 3002/user/add', directly write '/api/user/add }}},

The above vue. js uses proxy and Nginx to solve the cross-origin problem is all the content shared by Alibaba Cloud xiaobian. I hope to provide you with a reference and support for our guests.