Project cross domain solution

The development of the front and back end separation brings me a lot of convenience, both front-end and back-end students are in favor of this development method. Because this way we back-end students do not have to be CSS JS this lot of front-end code torture, front-end also do not have to change a style to open a background service. As convenient as this is, there are some issues that need to be addressed on the front end. For example, cross-domain problem. In the local LAN test of mobile terminal in the project today, cross-domain will appear when the mobile browser is opened (cross-domain on PC has been solved through Chrome Settings).

1. Set the browser across domains

In PC development, Chrome browser is our front-end essential development tools, with Chrome to solve the cross domain simple and crude.

1) Right-click Chrome and select Properties

2) Select a shortcut

–disable-web-security –user-data-dir=C (–user-data-dir isa custom directory)

Open a browser to solve cross-domain problems easily

2. Set the proxy in the vue configuration file

In the vue.config.js file in the front-end project built with vue-cli3, add the following code

DevServer: {proxy: {'/apis': {// map www.example.com to /apis target: 'https://www.example.com', // interface domain name Secure: ChangeOrigin: true, // Cross-domain pathRewrite: {'^/apis': "// rewrite,}}}}Copy the code

Please refer to the article for details

3. Background Settings allow cross-domains

This method is the most convenient method in my opinion. It is up to the server to decide whether to allow cross-domain. If yes, the server will set a field in the response header to tell the browser that the request is valid, and the browser will not discard the request packet, thus completing cross-domain. Here’s another example of nodeJS server chestnuts:

All ('*',function (req, res, next) {res.header(' access-Control-allow-origin ', '*'); res.header('Access-Control-Allow-Headers', 'Content-Type, Content-Length, Authorization, Accept, X-Requested-With , yourHeaderFeild'); res.header('Access-Control-Allow-Methods', 'PUT, POST, GET, DELETE, OPTIONS'); if (req.method == 'OPTIONS') { res.send(200); /} else {next(); }}); Copy the codeCopy the code

4. Set the server proxy (only the implementation scheme is given here)

This approach is suitable for large multi-platform projects where the address of the front-end Ajax request is actually accessed through the server. The front-end code runs on a layer of servers in NodeJS, and NodeJD is only responsible for running the front-end code and forwarding the front-end requests. For example, the example.org/index page needs to visit api.test.com/getNews to get the latest news, We can do this by adding an additional interface kangbiao.org/api?url=api.weibo.com/getNews to the example.org server and then inside the server, All the interface does is make a request to api.weibo.com/getNews and return the result.

This method is not recommended for single-class platforms because of high maintenance costs.