2. 程式人生 > 實用技巧 >Nginx解決跨域

Nginx解決跨域

阿新 • • 發佈：2020-12-16

什麼是CSS

如何學習

  1. 如何學習
  2. CSS怎麼用（快速入門)
  3. CSS選擇器(重點＋難點)
  4. 美化網頁(文字，陰影，超連結，列表,漸變....)
  5. 盒子模型
  6. 浮動
  7. 定位
  8. 網頁動畫（特效效果）

1.1什麼是CSS

Cascading Style Sheet層疊樣式表

CSS：表現（美化網頁）

字型，顏色，邊距，高度，背景圖片，網頁定位，網頁浮動...

1.2發展史

CSS1.0

CSS2.0 DIV（塊）+CSS，HTML與CSS結構分離的思想，網頁變簡單，SEO

CSS2.1 浮動，定位

CSS3.0 圓角，陰影，動畫... 瀏覽器相容性

1.3快速入門

  1. 內容表現分離
  2. 網頁結構表現統一
  3. 可以實現複用樣式十分的豐富
  4. 建議使用獨立於html的css檔案利用SEO
  5. 利用SEO，容易被搜尋引擎收錄!

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--規範，<style> 可以編寫css的程式碼
        選擇器{
        }
    -->
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
<h1>我是標題</h1>
</body>
</html>

css

h1{
    color: chartreuse;
}

1.4、CSS的3種匯入方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--內部樣式-->
    <style>
        h1{
            color: green;
        }
    </style>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
<!--優先順序：就近原則-->
<!--行內樣式：在標籤元素中，編寫一個style屬性，編寫樣式即可-->
<h1 style="color:red;"> 我是標題</h1>
</body>
</html>

拓展：外部樣式兩種寫法

  • 連結式

    <!--外部樣式-->
<link rel="stylesheet" href="css/style.css">

  • 匯入式

    @import是CSS2.1特有

    <!--匯入式-->
<style>
	@import url("css/style.css");
</style>

2、選擇器

作用：選擇頁面上的某一個或者某一類元素

2.1、基本選擇器

  1. 標籤選擇器：選擇一類標籤 標籤{}

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--標籤選擇器，會選擇頁面上的所有的這個標籤元素-->
    <style>
      h1{
          color: salmon;
          background: antiquewhite;
          border-radius:24px;
      }
      p {
          font-size: 80px;
      }
    </style>
</head>
<body>
<h1>java</h1>
<h1>html</h1>
<p>學習</p>
</body>
</html>

  2. 類選擇器class：選擇所有的class屬性一致的標籤，跨標籤 .類名{ }

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*類選擇器的格式 .class的名稱{}
        好處，可以多個標籤歸類，是同一個class，可以複用
        */
        .title1{
            color: aqua;
        }
        .title2{
            color: #7b806d;
        }


    </style>
</head>
<body>
<h1 class="title1">標題1</h1>
<h2 class="title2">標題2</h2>
<h2 class="title3">標題3</h2>
<p class="title1">p標籤</p>
</body>
</html>

  3. Id選擇器：全域性唯一！ #id名{}

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*id選擇器：id必須保證全域性唯一！
        #id名稱{}
        優先順序：
        不遵循就近原則。固定的
        id選擇器>class選擇器 > 標籤選擇器
        */
        #lemon{
            color: salmon;
        }
        .style1{
            color: chartreuse;
        }
        h1{
            color: blue;
        }
    </style>
</head>
<body>
<h1 class="style1" id="lemon">標題1</h1>
<h1 class="style1">標題2</h1>
<h1 class="style1">標題3</h1>
<h1>標題4</h1>
<h1>標題5</h1>
<h1>標題5</h1>
</body>
</html>

    2.2、層次選擇器

    1、後代選擇器：在某個元素的後面

    /*後代選擇器*/
body p{
    background:red;
}

    2、子選擇器：一代，兒子

    /*子選擇器*/
body>p{
    background: aqua;
}

    3、相鄰兄弟選擇器 同輩

    /*相鄰兄弟選擇器：只有一個、相鄰（向下） */
.active+p{
    background: green;
}

    4、通用選擇器

    /*通用選擇器*/
.active~p{
    background: blueviolet;
}

2.3、結構偽類選擇器

偽類：條

		 /*ul的第一個子元素*/
        ul li:first-child{
            background: blueviolet;
        }
        /*ul的最後一個元素*/
        ul li:last-child{
            background: blue;
        }
        /*選中p1:定位到父元素，選擇當前的第一個元素
        選擇當前p元素的父級元素，選中父級元素的第一個,並且是當前元素才生效!
        */
        p:nth-child(2) {
            background: bisque;
        }
        /*選中父元素，下的p元素的第二個，型別*/
        p:nth-of-type(1){
            background: yellow;
        }

2.4屬性選擇器（常用）

id+class 結合~

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .demo a{
            float: left;
            /*display: block;設定成塊元素*/
            display: block;
            height: 50px;
            width: 50px;
            /*border-radius: 10px;圓角邊框*/
            border-radius: 10px;
            background: blue;
            text-align: center;
            color: #b7b92e;
            /*text-decoration: none;去掉下劃線*/
            text-decoration: none;
            /*margin-right:5px;向右偏移5px*/
            margin-right:5px;
            line-height: 50px;
            font-weight: bold;
            font-family: Arial;
        }

        /* 屬性名，屬性名 = 屬性值（正則）
        = 絕對等於
        *= 包含這個元素
        ^= 以這個開頭
        $= 以這個結尾
        */

        /*存在id屬性的元素     a[]{}*/
        /*a[id]{*/
            /*background: yellow;*/
        /*}*/
        /*id=first的元素*/
        /*a[id=first]{*/
            /*background: green;*/
        /*}*/
        /*class 中有links的元素*/
        /*a[class*="links"]{*/
            /*background: yellow;*/
        /*}*/

        /*選中href中以http開頭的元素*/
        /*a[href^=http]{*/
            /*background: yellow;*/
        /*}*/
        a[href$=jpg]{
            background: green;
        }
    </style>
</head>
<body>
<p class="demo">
    <a href="http://www.baidu.com" class="links item" id="first">1</a>
    <a href="http://bolg.com" class="links item" target="_blank" title="test">2</a>
    <a href="images/123.html" class="links item">3</a>
    <a href="images/123.png" class="links item">4</a>
    <a href="images/123.jpg" class="links item">5</a>
    <a href="abc">6</a>
    <a href="/a.pdf">7</a>
    <a href="abc.doc">9</a>
    <a href="abcd.doc" class="links item last">10</a>
</p>
</body>
</html>

正則表示式

<!--正則表示式-->
		= 絕對等於
        *= 包含這個元素
        ^= 以這個開頭
        $= 以這個結尾

3、美化網頁

3.1、span標籤:重點要突出的字，使用span套起來

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #title1 {
            font-size: 50px;
        }
    </style>
</head>
<body>
歡迎學習
<span id="title1">java</span>
</body>
</html>

3.2、字型樣式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--
        font-family: 字型
        font-size:   字型大小
        font-weight: 字型粗細
        color：字型顏色
        -->
    <style>

        body{
            font-family: "Arial Black",楷體;
            color: blueviolet;
        }
        h1{
            font-size: 40px;
        }
        .p1{
            font-weight: bold;
        }
    </style>

</head>
<body>
<h1>故事介紹</h1>
<p class="p1">
從前有個全國管理系統，是孫中山做的設計，老蔣做的實現，
結果老毛寫了個病毒，趁著日本黑客對系統做攻擊的當口，拿到了管理員許可權，把原來那批程式設計師給隔離了。
</p>
<p>
老鄧接手以後，重構程式碼，出了個2.0版，為了開發速度，遺留了一堆BUG沒處理。
人們紛紛質疑：是不是核心構架太單一，雙核會不會好點？
</p>
<p>
    If you were a teardrop;In my eye,

    For fear of losing you,I would never cry

    And if the golden sun,Should cease to shine its light,

    Just one smile from you, would
</p>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--字型風格    oblique斜體-->
    <style>
        p{
            font: oblique bolder 16px "楷體";
        }
    </style>
</head>
<body>
<p>
    從前有個全國管理系統，是孫中山做的設計，老蔣做的實現，
    結果老毛寫了個病毒，趁著日本黑客對系統做攻擊的當口，拿到了管理員許可權，把原來那批程式設計師給隔離了。
    老鄧接手以後，重構程式碼，出了個2.0版，為了開發速度，遺留了一堆BUG沒處理。
    人們紛紛質疑：是不是核心構架太單一，雙核會不會好點？
</p>

</body>
</html>

3.3字型樣式

  1. 顏色 color rgb rgba
  2. 文字對齊的方式 text-align = center
  3. 首行縮排 text-indent:2em;
  4. 行高 line-height:
  5. 裝飾 text-decoration:
  6. 文字圖片水平對齊：vertical-align:middle
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--
    顏色：單詞
        RGB： 0~F
        REBA   A：0~1透明度
        color:rgba(0,255,255,0.8);
        text-align:排版，居中
        text-indent: 2em;段落首行縮排
        行高，和 塊的高度一致，就可以上下居中
        行高，和 塊的高度一致，就可以上下居中
        height: 300px;
        line-height: 300px;
    -->
    <style>
        h1{
            color:rgba(0,255,255,0.8);
            text-align: center;
        }
        .p1{
            text-indent: 2em;
        }
        .p3{
            background: blue;
            height: 300px;
            line-height: 300px;
        }
        /*下劃線*/
        .l1{
            text-decoration: underline;
        }
        /*中劃線*/
        .l2{
            text-decoration: line-through;
        }
        /*下劃線*/
        .l3{
            text-decoration:overline ;
        }
        a{
            text-decoration: none;
        }
    </style>
</head>
<body>
<a href="">123</a>
<p class="l1">112131</p>
<p class="l2">112131</p>
<p class="l3">112131</p>

<h1>故事介紹</h1>
<p class="p1">
    從前有個全國管理系統，是孫中山做的設計，老蔣做的實現，
    結果老毛寫了個病毒，趁著日本黑客對系統做攻擊的當口，拿到了管理員許可權，把原來那批程式設計師給隔離了。
</p>
<p>
    老鄧接手以後，重構程式碼，出了個2.0版，為了開發速度，遺留了一堆BUG沒處理。
    人們紛紛質疑：是不是核心構架太單一，雙核會不會好點？
</p>
<p class="p3">
    If you were a teardrop;In my eye,

    For fear of losing you,I would never cry

    And if the golden sun,Should cease to shine its light,

    Just one smile from you, would
</p>
</body>
</html>

3.4陰影

/*text-shadow:陰影顏色，水平偏移，垂直偏移，陰影半徑*/
        #price{
            text-shadow:#b7b92e 10px 10px 2px;
        }

3.5、超連結偽類

正常情況下，a，a：hover

/*預設顏色*/
 a{
      text-decoration: none;
}
/*滑鼠懸浮的狀態*/
 a:hover{
      color: #7b806d;
      font-size: 50px;
}

3.6、列表

/*ul li*/
/*
list-style:
    none  去掉圓點
    circle  空心圓
    decimal   數字
    square    正方形
*/
/*ul{*/
    /*background: #808080;*/
/*}*/
ul li{
    height: 30px;
    list-style: none;
    text-indent: 1em;
}

3.7背景

背景顏色
背景圖片

/*
        border:1px solid red;
        1px邊框的粗細
        solid 實線
        red  邊框顏色
         */
        div {
            width: 1000px;
            height: 700px;
            border: 1px solid red;
            background-image: url("images/1.jpg");
            /*預設是平鋪*/
        }
        .div1{
            /*水平平鋪*/
            background-repeat: repeat-x ;
        }
        .div2{
            /*垂直平鋪*/
            background-repeat: repeat-y;
        }
        .div3{
            /*不平鋪*/
            background-repeat: no-repeat;
        }

3.8、漸變

網址：https://www.grablent.com
徑向漸變、圓形漸變

 background-color:#21D4FD;
 background-image: linear-gradient(19deg,#21D4FD 0%,#B721FF 100%);

4、盒子模型

4.1什麼是盒子模型

  1. margin：外邊距
  2. padding：內邊距
  3. border：邊框

4.2、邊框

border：粗細 樣式 顏色

  1. 邊框的粗細
  2. 邊框的樣式
  3. 邊框的顏色

4.3、外邊距----妙用：居中

margin-left/right/top/bottom–>表示四邊，可分別設定，也可以同時設定如下

margin:0 0 0 0/*分別表示上、右、下、左；從上開始順時針*/
/*例1：居中*/
margin:0 auto /*auto表示左右自動*/
/*例2：*/
margin:4px/*表示上、右、下、左都為4px*/
/*例3*/
margin:10px 20px 30px/*表示上為10px，左右為20px，下為30px*/
1234567

盒子的計算方式：
margin+border+padding+內容的大小

總結：
body總有一個預設的外邊距 margin:0
常見操作：初始化

margin:0;
padding:0;
text-decoration:none;
123

4.4、圓角邊框----border-radius

border-radius有四個引數（順時針），左上開始
圓圈：圓角=半徑

4.5、盒子陰影

5、浮動

5.1標準文件流

塊級元素：獨佔一行 h1~h6 、p、div、 列表…
行內元素：不獨佔一行 span、a、img、strong

注： 行內元素可以包含在塊級元素中，反之則不可以。

5.2、display（重要）

  1. block：塊元素
  2. inline：行內元素
  3. inline-block：是塊元素，但是可以內聯，在一行

這也是一種實現行內元素排列的方式，但是我們很多情況用float

  1. none：消失
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--block 塊元素
        inline 行內元素
        inline-block 是塊元素，但是可以內聯 ，在一行
    -->
    <style>
        div{
            width: 100px;
            height: 100px;
            border: 1px solid red;
            display: inline-block;
        }
        span{
            width: 100px;
            height: 100px;
            border: 1px solid red;
            display: inline-block;
        }
    </style>
</head>
<body>
<div>div塊元素</div>
<span>span行內元素</span>
</body>
</html>
1234567891011121314151617181920212223242526272829

QQ會員頁面導航練習

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>QQ會員</title>
    <link rel="stylesheet" href="css/style.css" />
</head>
<body>
<div class="wrap">
    <!--頭部-->
    <header class="nav-header">
        <div class="head-contain">
            <a href="" class="top-logo"><img src="img/logo.png" width="145" height="90" /></a>
            <nav class="top-nav">
                <ul>
                    <li><a href="">功能特權</a> </li>
                    <li><a href="">遊戲特權</a> </li>
                    <li><a href="">生活特權</a> </li>
                    <li><a href="">會員特權</a> </li>
                    <li><a href="">成長體系</a> </li>
                    <li><a href="">年費專區</a> </li>
                    <li><a href="">超級會員</a> </li>
                </ul>
            </nav>
            <div class="top-right">
                <a href="">登入</a>
                <a href="">開通超級會員</a>
            </div>
        </div>
    </header>
</div>
</body>
</html>
123456789101112131415161718192021222324252627282930313233
*{
    padding:0;
    margin: 0;
}
a{
    text-decoration: none;
}
.nav-header{
    height: 90px;
    width: 100%;
    background: rgba(0,0,0,.6);
}
.head-contain{
    width: 1180px;
    height: 90px;
    margin: 0 auto;
    text-align: center;
}
.top-logo,.top-nav,.top-nav li,.top-right{
    height: 90px;
    display: inline-block;
    vertical-align: top;
}
.top-nav{
    margin: 0 48px;
}
.top-nav li{
    line-height: 90px;
    width: 90px;
}
.top-nav li a{
    display: block;
    text-align: center;
    font-size: 16px;
    color: #fff;
}
.top-nav li a:hover{
    color: blue;
}

.top-right a{
    display: inline-block;
    font-size: 16px;
    text-align: center;
    margin-top: 25px;
    border-radius: 35px;
}
.top-right a:first-of-type{
    width: 93px;
    height: 38px;
    line-height: 38px;
    color: #fad65c;
    border: 1px #fad65c solid;
}
.top-right a:first-of-type:hover{
    color: #986b0d;
    background: #fad65c;
}
.top-right a:last-of-type{
    width: 140px;
    height: 40px;
    font-weight: 700;
    line-height: 40px;
    background: #fad65c;
    color: #986b0d;
}
.top-right a:last-of-type:hover{
    background: #fddc6c;
}

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970

5.3、float：left/right左右浮動

clear：both

5.4、overflow及父級邊框塌陷問題

clear：
right：右側不允許有浮動元素
left：左側不允許有浮動元素
both：兩側不允許有浮動元素
none：

解決塌陷問題方案：
方案一：增加父級元素的高度；
方案二：增加一個空的div標籤，清除浮動

<div class = "clear"></div>
<style>
	.clear{
		clear:both;
		margin:0;
		padding:0;
}
</style>
12345678

方案三：在父級元素中增加一個overflow：hidden

overflow:hidden/*隱藏*/
overflow：scoll/*滾動*/

方案四：父類新增一個偽類:after

#father:after{
	content:'';
	display:block;
	clear:both;
}

小結：

  1. 浮動元素增加空div

    簡單、程式碼儘量避免空div

  2. 設定父元素的高度

    簡單，元素假設沒有了固定的高度，就會超出

  3. overflow

    簡單，下拉的一些場景避免使用

  4. 父類新增一個偽類:after（推薦）

    寫法稍微複雜，但是沒有副作用，推薦使用

5.5、display與float對比

  1. display：方向不可以控制
  2. float：浮動起來的話會脫離標準文件流，所以要解決父級邊框塌陷的問題。

6、定位

6.1、相對定位

相對定位：positon：relstive；
相對於原來的位置，進行指定的偏移，相對定位的話，它仍然在標準文件流中，原來的位置會被保留

top:-20px;
left:20px;
bottom:-10px;
right:20px;

練習題：連線卡

6.2、絕對定位-absolute

定位：基於xxx定位，上下左右~
1、沒有父級元素定位的前提下，相對於瀏覽器定位
2、假設父級元素存在定位，我們通常會相對於父級元素進行偏移
3、在父級元素範圍內移動
總結：相對一父級或瀏覽器的位置，進行指定的偏移，絕對定位的話，它不在標準文件流中，原來的位置不會被保留

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            margin: 10px;
            padding: 5px;
            font-size: 12px;
            line-height: 25px;
        }
        #father{
            border: 1px solid #666;
            padding: 0;
            position: relative;
        }
        #first{
            background-color: #a13d30;
            border: 1px dashed #b27530;

        }
        #second{
            background-color: green;
            border: 1px dashed #0ece4f;
            position: absolute;
            right:30px;
            top:30px
        }
        #third{
            background-color: red;
            border: 1px dashed #ff1b87;
        }
    </style>
</head>
<body>
<div id = "father">
    <div id="first">第一個盒子</div>
    <div id="second">第二個盒子</div>
    <div id="third">第三個盒子</div>
</div>
</body>
</html>

6.3、固定定位-fixed

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            height: 1000px;
        }
         div:nth-of-type(1){/*絕對定位：沒有相對的父級元素，所以相對於瀏覽器*/
             width: 100px;
             height: 100px;
             background:red;
             position: absolute;
             right: 0;
             bottom: 0;
         }
        div:nth-of-type(2){
            width: 50px;
            height: 50px;
            background: yellow;
            position: fixed;
            right: 0;
            bottom: 0;
        }
    </style>
</head>
<body>

<div>div1</div>
<div>div2</div>
</body>
</html>

6.4、z-index


圖層~
z-index：預設是0，最高無限~999

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/style.css">

</head>
<body>
<div id="content">
    <ul>
        <li><img src="images/bg.jpg" alt=""></li>
        <li class="tipText">學習微服務，找狂神</li>
        <li class="tipBg"></li>
        <li>時間：2099-01=01</li>
        <li>地點：月球一號基地</li>
    </ul>
</div>
</body>
</html>



#content{
    width: 380;
    padding: 0px;
    margin: 0px;
    overflow: hidden;
    font-size: 12px;
    line-height: 25px;
    border: 1px solid yellow;
}
ul,li{
    padding: 0px;
    margin: 0px;
    list-style: none;
}
/*父級元素相對定位*/
#content ul{
    position: relative;
}
.tipText,.tipBg{
    position: absolute;
    width: 380px;
    height: 25px;
    top:216px
}
.tipText{
    color: white;
    z-index: 999;
}
.tipBg{
    background: orange;
    opacity: 0.5;/*背景透明度*/
    filter: alpha(opacity=50);/*IE8之前的瀏覽器支援*/
}

7、動畫及視野

相關推薦

Nginx解決跨域問題

為何會跨域？ 出於瀏覽器的同源策略限制。同源策略（Sameoriginpolicy）是一種約定，它是瀏覽器最核心也最基本的安全功能，如果缺少了同源策略，則瀏覽器的正常功能可能都會受到影響。可以說Web是構建在同源策略基礎

Nginx解決跨域

nginx反向代理 思路是：利用nginx把跨域反向代理為不跨域，支援各種請求方式 缺點：需要在nginx進行額外配置，語義不清晰

Nginx解決跨域請求，通俗解釋

摘自：https://segmentfault.com/a/1190000022415375 一、Nginx 關於Nginx的用途，聽到最多的兩個詞，就是：

【Nginx】使用Nginx如何解決跨域問題？看完這篇原來很簡單！！

寫在前面 當今網際網路行業，大部分Web專案基本都是採用的前後端分離模式。前端為H5專案，後端為Java、PHP、Python等專案。而且大部分後端服務並不會只部署一套服務，而是會採用Nginx對後端服務進行負載均衡。那麼，

Nginx王八組合拳-nginx配置解決跨域問題

配置如下： server { listen9999; server_name172.16.3.33; location / { if ($request_method = \'OPTIONS\') {

Linu Nginx部署專案,解決跨域問題

Linu Nginx部署專案,解決跨域問題 1. 準備三臺Linux伺服器, 能互相通訊 伺服器Ip假設如下

Nginx配置跨域請求Access-Control-Allow-Origin * 詳解

前言 當出現403跨域錯誤的時候 No \'Access-Control-Allow-Origin\' header is present on the requested resource，需要給Nginx伺服器配置響應的header引數：

springboot解決跨域問題(Cors)

1、對於前後端分離的專案來說，如果前端專案與後端專案部署在兩個不同的域下，那麼勢必會引起跨域問題的出現。

springBoot解決跨域問題

Springboot跨域問題三種解決方案 1.自定義跨域過濾器 編寫過濾器 public class MyCorsFilter implements Filter {

tornado vue 解決跨域問題

tornado-vue 解決跨域問題 在tornado 中寫一個BaseHandler類，其他類，繼承這個BaseHandler類即可

日常開發解決跨域--關閉瀏覽器安全策略

日常開發中如果遇到跨域，我們可以選擇使用 Chrome, 並關閉其安全策略，來繞開跨域問題。

nginx配置跨域訪問，無法生效

問題描述 最近在配置nginx跨域問題上折騰了很長時間。網址開發通常將動態資源與靜態資源分開，在A的伺服器上需要去載入B伺服器上的靜態資源時通常就會遇到跨域的問題，如下載入字型靜態檔案

vue---封裝request.js解決跨域問題【再一次完美解決】

最近在用VUE開發www.dianphp.com後臺管理系統，再次遇到vue使用axios,在進行跨域請求的時候，遇到了一些分裝reques.js以及遇到了一些封裝問題和跨域問題，但是經過一天的測試最終還是解決了。

JSONP是個嘛玩意？解決跨域問題？

瀏覽器同源策略 限制js向 其他域名發起請求，瀏覽器除錯報錯如下 JSONP 是一種解決方法

12.axios解決跨域問題（vue-cli3)

https://www.cnblogs.com/l-y-h/p/11815452.html axios解決跨域問題（vue-cli3.0） 閱讀目錄 一、什麼是跨域

PHP解決跨域問題，你常用哪種方法？

什麼是跨域 跨域，指的是從一個域名去請求另外一個域名的資源。即跨域名請求！跨域時，瀏覽器不能執行其他域名網站的指令碼，是由瀏覽器的同源策略造成的，是瀏覽器施加的安全限制。

Vue專案中解決跨域問題

背景：由於瀏覽器的同源政策，在不同協議、域名、埠時進行資料訪問將會出現跨域問題

Vue proxyTable配置多個介面地址,解決跨域的問題

最開始的時候，因為請求後臺出現跨域問題。 查詢資料配置proxyTable，解決跨域問題。如下圖所示：

Django解決跨域的問題

由於瀏覽器的同源策略(是一種瀏覽器為安全性考慮實施的安全策略)，當從一個域上載入的指令碼去訪問另一個域的文件屬性時，則會被拒絕。同源指：URL由協議、域名、埠和路徑組成，如果兩個URL的協議、域名和埠相同，則

Go | Gin 解決跨域問題跨域配置

Go | Gin 解決跨域問題跨域配置 目錄一、關於跨域解決方案二、使用步驟1. 編寫一箇中間件2. 使用3. 注意事項