常见跨域问题解决方案

一、json

原理：动态生成script标签，通过src属性加载
缺点：不支持POST
应用场景：有些第三方数据接口可能会使jsonp解决跨域问题，工作中不怎么用
思路：
1.将非同源服务器端的请求地址写在script标签的src属性中

2.服务器端响应数据必须是一个函数的调用，要真正发送给客户端的数据需要作为函数调用的参数

app.get("/jsonp", (req, res) => {
  const result = "fn({name:'zhangsan',age:20})";
  res.send(result);
});

3.接受服务器端响应

二、中间服务器代理
例如：
前端部署地址：127.0.0.1:8000
中间服务器：127.0.0.1:8000
目标服务器地址：127.0.0.1:8888
一号客户端

一号服务器

// 引入express框架
const express = require('express');
// 路径处理模块
const path = require('path');
// 向其他服务器端请求数据的模块
const request = require('request');
// 创建web服务器
const app = express();
// 静态资源访问服务功能
app.use(express.static(path.join(__dirname, 'public')));

app.get('/server', (req, res) => {
    request('http://localhost:3001/cross', (err, response, body) => {
        res.send(body);
    })
});

// 监听端口
app.listen(3000);
// 控制台提示输出
console.log('服务器启动成功');

二号服务器

app.get('/cross', (req, res) => {
    res.send('ok')
});

三、CORS跨域资源共享，服务器进行配置，加一个响应头，工作中做常用

res.header('Access-Control-Allow-Origin','*')

拦截所有页面请求

// 拦截所有请求
app.use((req, res, next) => {
    // * 代表允许所有的客户端访问我
    res.header('Access-Control-Allow-Origin', '*')
    // 2.允许客户端使用哪些请求方法访问我
    res.header('Access-Control-Allow-Methods', 'get,post')

    next();
});

四、Vue反向代理配置,在vue.config.js中配置

    // 设置代理
module.exports = {
  lintOnSave: false,
  devServer: {
    // 设置代理
    proxy: {
      "/api": {
        target: "http://127.0.0.1:8888/api/private/v1/", // 域名
        ws: true, // 是否启用websockets
        changOrigin: true, //开启代理：在本地会创建一个虚拟服务端，然后发送请求的数据，并同时接收请求的数据，这样服务端和服务端进行数据的交互就不会有跨域问题
        pathRewrite: {
          "^/api": "/"
        }
      }
    }
  }
}