vue框架前後端分離專案之跨域問題及首頁搭建等相關內容-117
阿新 • • 發佈：2020-12-23
1 同源策略：瀏覽器的安全策略，不允許去另一個域載入資料
2 域：ip或者埠都必須一致
3 前後端分離專案會出現跨域
4 不使用第三方，自己處理
5 CORS：後端技術，跨域資源共享，服務端只要做配置，（本身瀏覽器已經支援了），就支援跨域
-access-control-allow-origin: * # 所有的域都可以向我傳送請求，瀏覽器不會禁止
6 瀏覽器將CORS請求分成兩類：
-簡單請求（simple request）
-非簡單請求（not-so-simple request）
7 滿足以下兩大條件就是簡單請求
（1) 請求方法是以下三種方法之一：
HEAD
GET
POST
（2）HTTP的頭資訊不超出以下幾種欄位：
Accept
Accept-Language
Content-Language
Last-Event-ID
Content-Type：只限於三個值application/x-www-form-urlencoded、multipart/form-data、text/plain
8 簡單請求，只發送一次，如果後端寫了CORS，瀏覽器就不禁止了
9 非簡單請求，發兩次，第一次是OPTIONS（預檢請求），看後端是否允許，如果允許再發真正的請求
1.1 後端自己處理跨域問題
# 寫一箇中間件
from django.utils.deprecation import MiddlewareMixin
class CoreMiddle(MiddlewareMixin):
def process_response(self, request, response):
if request.method == 'OPTIONS': # 處理了非簡單請求
response['Access-Control-Allow-Headers'] = 'Content-Type,authorization'
# 處理了簡單請求
response['Access-Control-Allow-Origin'] = '*'
return response
# setting中註冊
MIDDLEWARE = [
...
'middle.CoreMiddle', # 自己寫的處理跨域問題的中介軟體
...
]
1.2 前端處理跨域
vue.config.js
module.exports = {
devServer: {
proxy: {
'/ajax': {
target: 'https://m.maoyan.com/',
changeOrigin: true
},
'/user': {
target: 'http://127.0.0.1:8000/',
changeOrigin: true
},
}
}
};
# axios傳送請求
this.$axios.get('user/test/').then(item=>{
console.log(item.data)
})
# 修改配置要重啟
2 頭部元件，尾部元件
<template>
<div class="header">
<div class="slogan">
<p>老男孩IT教育 | 幫助有志向的年輕人通過努力學習獲得體面的工作和生活</p>
</div>
<div class="nav">
<ul class="left-part">
<li class="logo">
<router-link to="/">
<img src="../assets/img/head-logo.svg" alt="">
</router-link>
</li>
<li class="ele">
<span @click="goPage('/free-course')" :class="{active: url_path === '/free-course'}">免費課</span>
</li>
<li class="ele">
<span @click="goPage('/actual-course')" :class="{active: url_path === '/actual-course'}">實戰課</span>
</li>
<li class="ele">
<span @click="goPage('/light-course')" :class="{active: url_path === '/light-course'}">輕課</span>
</li>
</ul>
<div class="right-part">
<div>
<span>登入</span>
<span class="line">|</span>
<span>註冊</span>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: "Header",
data() {
return {
//sessionStorage中有url_path就使用它，沒有就是 /
url_path: sessionStorage.url_path || '/',
}
},
methods: {
goPage(url_path) {
// 已經是當前路由就沒有必要重新跳轉
if (this.url_path !== url_path) {