How to deal with cross-domain issues when Vue is online

When developing Vue applications, you will encounter the separation of front-end and back-end, and you may encounter cross-domain problems. Cross-domain problems usually do not occur when developing locally, but when the project goes online, if the front and back ends are deployed on different servers, cross-domain problems will occur. In this article, we will have an in-depth understanding of the background and solutions to the cross-domain problem of Vue online in order to better deal with this problem.

What is cross-domain?

Cross-domain refers to using cross-domain requests when accessing resources on a server. There are many types of cross-domain requests, the common ones include cross-domain access to resources, cross-domain writing of cookies, cross-domain calling interfaces, etc. Under the browser security policy, cross-domain requests are prohibited by default because cross-domain requests may bring security risks.

Solve the cross-domain problem of Vue online

1. Proxy server

The proxy server forwards the request to the server where the interface is located when the front end requests the background interface. The front-end code uses the address of the proxy server as the request path to ensure that the request proceeds normally. Using the proxy server, the front-end can forward requests to the interface, proxy the return content of the back-end interface, modify the return content, and add some modifying parameters or processing logic before and after the request. Most proxy servers are written by back-end personnel and can be called by front-end projects.

There are many types of proxy servers, such as Nginx, Alibaba Cloud API Gateway, Apache, etc. When the Vue project goes online, use a proxy server to point the access paths of all interfaces to the same domain name. For example, redirect all interface request paths to "/api" and use "/api" as the request path. Then define a forwarding rule on the proxy server to forward requests starting with "/api" to the server where the backend interface is located to solve the cross-domain problem.

Configure the proxy server in the Vue project:

//vue.config.js
module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:8080',
        changeOrigin: true, //是否跨域
        pathRewrite: {
          '^/api': '/'
        }
      },
    }
  }
}

2.jsonp

JSONP is a solution for JavaScript and cross-domain requests. The client dynamically creates the <script></script> tag, adds the requested URL (interface address) and callback function as parameters, and sends the request to the server. After the server accepts the request, it returns a JavaScript script, callback function and carries the required data. Finally, the client processes the returned data in the callback function. JSONP is a more flexible cross-domain solution, but it can only support GET requests and can only request data in plain text format.

Using JSONP in Vue projects:

this.$jsonp('http://api.jisuapi.com/weather/query', { //jsonp函数可以使用axios+jsonp的方式实现
    city: '上海',
    appkey: 'your appkey'
  }, (data) => {
    console.log(data)
  })

3.CORS

CORS (Cross-Origin Resource Sharing) is an official solution for cross-domain requests, which allows The web application server performs cross-domain access control, allowing the browser to safely complete cross-domain requests. To use CORS, you only need to add the Access-Control-Allow-Origin field to the response header information in the background and set it to '*' or the specified domain name. Then the browser will process it based on the response header information, so as to solve the cross-border problem. Domain request issue.

Add response header information in the background:

//以Java Web服务为例，增加响应头信息
response.setHeader("Access-Control-Allow-Origin", "*");//允许跨域

4. WebSocket

WebSocket is a full-duplex communication protocol that plays a role in cross-domain requests Very good solution. WebSocket performs a handshake via the HTTP protocol, and after a connection is created, data can be transferred in both directions between the client and the server.

Using WebSocket in the Vue project:

var ws = new WebSocket('ws://localhost:8080');
ws.onopen = function() {
  ws.send('发送消息到服务器');
};
ws.onmessage = function(event) {
  console.log('从服务器接受到 ', event.data);
}

Summary

The above are four methods to solve the cross-domain problem of Vue online: proxy server, JSONP, CORS and WebSocket. Different scenarios and choosing different solutions can help us better solve cross-domain problems when Vue goes online and make our projects smoother. It should be reminded that when using the above methods, you must pay attention to safety to ensure the smooth launch of the project.

The above is the detailed content of How to deal with cross-domain issues when Vue is online. For more information, please follow other related articles on the PHP Chinese website!