vue框架前后端分离项目之跨域问题及首页搭建等相关内容-117
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 !==