vue跨域操作

Vue.js 是一个轻量级的 JavaScript 框架，它的主要目的是构建用户界面。Vue.js 本身并没有提供跨域操作的功能，但是可以通过一些方法来解决跨域问题。

通过配置后端接口来解决跨域问题。

在后端服务中添加如下配置：

// Node.js express 服务器
const express = require('express');
const app = express();

// 设置跨域访问
app.all('*', function(req, res, next) {
    res.header("Access-Control-Allow-Origin", "*");
    res.header("Access-Control-Allow-Headers", "X-Requested-With");
    res.header("Access-Control-Allow-Methods","PUT,POST,GET,DELETE,OPTIONS");
    res.header("X-Powered-By",' 3.2.1')
    res.header("Content-Type", "application/json;charset=utf-8");
    next();
});

// 接口路由
app.get('/api/user', (req, res) => {
    res.json({name: 'user1', age: 18});
});

// 启动服务
app.listen(3000, () => {
    console.log('server start at http://localhost:3000');
})

这里的 app.all 方法表示所有请求都会经过这个中间件，通过设置 Access-Control-Allow-Origin 来允许跨域请求。

使用代理解决跨域问题。

在 vue.config.js 文件中添加如下配置：

module.exports = {
    devServer: {
        host: 'localhost',
        port: 8080,
        proxy: {
            '/api': {
                target: 'http://localhost:3000',
                changeOrigin: true,
                pathRewrite: {
                    '^/api': '/api'
                }
            }
        }
    }
}

这里的 proxy 属性表示代理，将请求转发到另一个服务器。其中，target 表示被代理的服务器地址，changeOrigin 表示是否改变源，pathRewrite 表示路径重写。

使用 JSONP 跨域。

JSONP 是一种跨域的解决方案，它利用了 script 标签不受同源策略限制的特性。在 Vue.js 中，可以通过封装一个 JSONP 方法来实现跨域请求。

function jsonp(url, params, callback) {
    const script = document.createElement('script');
    const query = Object.keys(params).map(key => `${key}=${params[key]}`).join('&');
    script.src = `${url}?${query}&callback=${callback}`;
    document.body.appendChild(script);
}

jsonp('http://localhost:3000/api/user', {name: 'user1', age: 18}, 'callback');

这里的 jsonp 方法将传入的参数拼接成一个完整的 URL，并创建一个 script 标签，将 URL 作为 src 属性赋值给 script 标签，然后将 script 标签添加到 body 中，使其自动执行请求。