Cross-domain problems encountered in Vue technology development and their solutions

Cross-domain problems and solutions encountered in the development of Vue technology

Abstract: This article will introduce the cross-domain problems that may be encountered during the development of Vue technology and solutions. We'll start with what causes cross-origin, then cover a few common solutions and provide specific code examples.

1. Causes of cross-domain problems
In web development, due to the browser's security policy, the browser will restrict requests from one source (domain, protocol or port) for resources from another source. This is the so-called "same origin policy". When we develop Vue technology and the interfaces of the front-end and back-end are not in the same domain, we will encounter cross-domain problems.

2. Solution

1. Proxy cross-domain
   Using a proxy server to forward API requests is a common method to solve cross-domain problems. We can configure the proxyTable property in vue.config.js to point to the proxy server. The following is a sample code:

// vue.config.js

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://api.example.com',
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    }
  }
}

2. JSONP
   JSONP is a cross-domain request method that dynamically creates <script></script> tags using The src attribute requests a URL with a callback function. When the backend returns data, it will return the data as a parameter of the callback function, and the frontend processes the returned data through the callback function. The following is a sample code:

// 前端代码
import jsonp from 'jsonp'

jsonp('http://api.example.com?callback=handleData', (err, data) => {
  if (err) {
    console.error(err)
  } else {
    handleData(data)
  }
})

function handleData(data) {
  console.log('处理后的数据：', data)
}

// 后端代码
handleData(req, res) {
  const data = {
    name: 'Vue',
    version: '2.6.10'
  }
  const callback = req.query.callback
  res.send(`${callback}(${JSON.stringify(data)})`)
}

3. CORS
   CORS is an officially recommended method of handling cross-domain issues. It requires setting the corresponding response header information on the backend. The following is a sample code:

// 后端代码
handleData(req, res) {
  res.setHeader('Access-Control-Allow-Origin', 'http://www.example.com')
  res.setHeader('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE')
  res.setHeader('Access-Control-Allow-Headers', 'Content-Type, Authorization')
  res.setHeader('Access-Control-Max-Age', '86400')
  // ...
  // 处理请求并返回数据
}

4. Nginx reverse proxy
   If your project has been deployed to the Nginx environment, you can configure Nginx to implement a reverse proxy to solve cross-domain problems. . The following is an example Nginx configuration:

location /api {
  proxy_pass http://api.example.com;
  proxy_set_header Host $host;
  proxy_set_header X-Real-IP $remote_addr;
  proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;

  # 允许跨域访问
  add_header Access-Control-Allow-Origin *;
  add_header Access-Control-Allow-Methods 'GET, POST, PUT, DELETE';
  add_header Access-Control-Allow-Headers 'Content-Type, Authorization';
}

Conclusion
This article introduces cross-domain problems that may be encountered in Vue technology development and their solutions. We discussed four common solutions for proxy cross-domain, JSONP, CORS and Nginx reverse proxy, and provided corresponding code examples. In actual development, we can choose appropriate solutions to solve cross-domain problems according to the needs of the project. I hope this article will be helpful to everyone who encounters cross-domain issues in Vue technology development.

Reference materials:

• Vue.js official documentation: https://vuejs.org/
• Nginx official documentation: https://nginx.org/

The above is the detailed content of Cross-domain problems encountered in Vue technology development and their solutions. For more information, please follow other related articles on the PHP Chinese website!