Shulou(Shulou.com)05/31 Report--

This article mainly introduces "how to solve the cross-domain problem of vue project deployment". In the daily operation, I believe many people have doubts about how to solve the cross-domain problem of vue project deployment. The editor consulted all kinds of materials and sorted out simple and easy-to-use operation methods. I hope it will be helpful to answer the doubt of "how to solve the cross-domain problem of vue project deployment". Next, please follow the editor to study!

The first is the backend:

Filter:

@ Configurationpublic class GlobalCorsConfig {/ * * filter that allows cross-domain calls * / @ Bean public CorsFilter corsFilter () {CorsConfiguration config = new CorsConfiguration (); / / allows all domain names to make cross-domain calls to config.addAllowedOriginPattern ("*"); / / config.addAllowedOrigin ("*"); / / allows cross-sending cookie config.setAllowCredentials (true) / / release all original header information config.addAllowedHeader ("*"); / / allow all request methods to call config.addAllowedMethod ("*") across domains; UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource (); source.registerCorsConfiguration ("/ * *", config); return new CorsFilter (source);}}

If setAllowCredentials is true, then the parameter of config.addAllowedOrigin ("*") cannot be *. It must be indicated that it is commented out directly here and addAllowedOriginPattern is used.

Controller layer:

Web is included in the path, which is important, remember

Yml file:

Backend port 8086, application context path: / weijianweiAdminApi

Then there is the front end:

Set BASE_API to / web in dev.env.js

Set the proxyTable in the dev in index.js. Here, a forwarding is implemented on the node.js during the development process, which forwards the request to the backend, which mainly solves the cross-domain problem in the development process.

After setting up these, npm run dev, the project is ready to run locally

After the development is complete, the project is packaged and placed on the server:

First create a folder named weijianwei in the html folder of the server's nginx

Put the files generated by the packaging of npm run build in weijianwei:

Change the assetsPublicPath in index to weijianwei, corresponding to the folder name above.

Set up the nginx profile nginx.conf:

Server {listen 8099; server_name localhost; location / weijianweiAdminApi/ {proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for Proxy_set_header X-NginX-Proxy true; client_max_body_size 200m; proxy_pass http://localhost:8086;}}

Listen on port 8099, match the path weijianweiAdminApi, and forward it to http://localhost:8086

Visit the project at this time: the http://localhost:8099/weijianwei page appears successfully. When you log in, the pre-check request is passed, and the formal request is reported for cross-domain problems.

The front-end project prod.env.js sets the BASE_API:

Successful login access

At this point, the study on "how to solve the cross-domain problem of vue project deployment" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.