Vue跨域解决方案
发布日期:2021-05-14 08:28:42 浏览次数:14 分类:精选文章

本文共 4520 字,大约阅读时间需要 15 分钟。

���������������������������������

������������ Cross-Origin Request���������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������

���������������������

������������������������������������������

  • ������������������������http:// ��� https://���
  • ������������������ www.baidu.com ��� baidu.com���
  • ������������������������8080 ��� 80���
  • ������������������������������������������������������������������������������

    ������������������������

    ���������������������������������������������������������������������������

    1. ���������������������������������������

    ��������������������������������������������������������������� CORS ��� Codix������������������������������������������������������������������������

  • ���������������������������������������������

    module.exports = {
    publicPath: './',
    devServer: {
    proxy: {
    '/api': {
    target: 'http://backend-server.com',
    changeOrigin: true
    }
    }
    }
    }

    ������������������������������������������������������������������������������

  • ��������������������� ������������������������������������������������������������ Access-Control-Allow-Origin���Access-Control-Allow-Methods ��� Access-Control-Allow-Headers���

  • ������ extraordinaires headers��� ���������������������������������������������������������������������������������������������������������������

    const headers = {
    'Access-Control-Allow-Origin': '*',
    'Access-Control-Allow-Methods': 'GET, POST, PUT, DELETE',
    'Access-Control-Allow-Headers': 'Content-Type, Authorization'
    };
    this.$axios.defaults.headers.common = headers;
  • ��������������� ������ frontend ��� backend ���������������������������)CORS]));

  • 2. ������������_Write

    ��������������������������������������������������������� File Writers API������������������������������������������������������������������������

    const file = new Blob([/* ������������������ */], { type: 'text/plain' });
    file.write(name => `${name}.txt`);

    ������������������������������������������������������������������������������������������������������������

    3. ������ WebSocket

    • WebSocket ������������������������������������������������������������������������������������������ WebSocket Tunnel ������������������������
  • ������������ frontend ������ WebSocket ���������

    var ws = new WebSocket('ws://backend-server.com:8080');
    ws.onmessage = function (event) {
    console.log('������������:', event.data);
    };
  • ������ backend ������ WebSocket ������������������������������������������

  • ������������������������

    ������������������������������������������������������������������������������������������������������

  • ���������������������forward proxy

    ��������� API ���������������������������������������������

    curl -v -X OPTIONS http://yourdomain.com/api  \
    --header "Host: your_backend_domain.com"

    ������������������ CORS ������������������������������������������������

  • ������CDN

    ������������������������������������ URL ������������������ CDN ���������������������������������

  • ������������������

    ������������������ CORS ���������������������������������������

    # Apache ������
    Header set Access-Control-Allow-Origin "https://your.frontend.com"

    ���������������������* ������������������ production servers ������������

  • ������������������������������������

    ������������������������������������������������������

  • ���������������������������������������������������������������������������������

  • ������������������ CORS ��������������������������� origin ������������������������������������������������������������ headers.

  • ������������������������X-Frame-Options ������������������������ iframeocyte ��������� clickjacking���

  • ������������������������������

    ���������������������������������������������������������������

    curl -H "Origin: http://localhost:8080" \
    -X POST http://localhost:8081/api/test \
    -H "Content-Type: application/json" \
    -d '{"method":"GET"}'

    ������ Command Line Tool ���������������������������������������������

    ������

    ������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������

    上一篇:vue使用uuid
    下一篇:基于vant-ui的vant-picker二次封装

    发表评论

    最新留言

    路过按个爪印,很不错,赞一个!
    [***.219.124.196]2025年05月01日 07时04分33秒

    关于作者

        喝酒易醉,品茶养心,人生如梦,品茶悟道,何以解忧?唯有杜康!
    -- 愿君每日到此一游!

    推荐文章