How to implement cross-domain in vue

With the continuous development of front-end technology, front-end engineers often need to obtain data through Ajax requests when making websites. In this process, it is easy to encounter cross-domain problems. This article will introduce how Vue.js implements cross-domain requests.

1. JSONP cross-domain

JSONP (JSON with Padding) is a solution for cross-domain data interaction. It is implemented by using the principle that the page can load cross-site scripting.

To implement JSONP cross-domain requests in Vue.js, there are usually two methods:

1) Manually create script tags

Use HTTP libraries such as axios or Vue-resource , initiate cross-domain requests by manually creating script tags.

import jsonp from 'jsonp';

jsonp(url, null, (err, data) => {
  if (err) {
    console.error(err.message);
  } else {
    console.log(data);
  }
});

2) Use the Vue.js plug-in jsonp

Vue.js provides a plug-in called jsonp, which we can use to implement JSONP cross-domain requests.

import Vue from 'vue';
import VueJsonp from 'vue-jsonp';

Vue.use(VueJsonp);

Vue.jsonp(url).then(response => {
  console.log(response);
}).catch(error => {
  console.error(error.message);
});

2. CORS cross-domain

CORS (Cross-Origin Resource Sharing) is a cross-domain resource sharing solution that allows the website server to allow cross-origin resource sharing to the browser. Domain access, thus avoiding some security issues of JSONP method.

CORS cross-domain requests are used in Vue.js, and relevant settings need to be made on the server side. The specific implementation method is as follows:

1) Add the Access-Control-Allow-Origin field in the response header

Add the Access-Control-Allow-Origin field in the response header returned by the server, Allow requests from specific domain names for front-end pages.

const express = require('express');
const app = express();

app.get('/api/data', (req, res) => {
  res.setHeader('Access-Control-Allow-Origin', 'http://localhost:8080');
  res.json(data);
});

2) Send a request in Vue.js

Send a cross-domain request through the Axios library in Vue.js, just set withCredentials to true.

axios.get('http://api.example.com/data', {
  withCredentials: true
}).then(response => {
  console.log(response.data);
}).catch(error => {
  console.error(error.message);
});

Summary

The above are the two ways to implement cross-domain requests in Vue.js, JSONP and CORS. In actual development, we can adopt different methods according to specific circumstances. If it is very secure and does not require additional server configuration, we can use the JSONP cross-domain solution; if higher security and greater flexibility are required, we can use the CORS cross-domain solution.

The above is the detailed content of How to implement cross-domain in vue. For more information, please follow other related articles on the PHP Chinese website!