資訊專欄INFORMATION COLUMN
摘要：由兩部分組成回調函數(shù)和數(shù)據(jù)?；卣{函數(shù)是當響應到來時應該在頁面中調用的函數(shù)?；卣{函數(shù)的名字一般是在請求中指定的。動態(tài)創(chuàng)建標簽，設置其，回調函數(shù)在中設置在頁面中，返回的作為參數(shù)傳入回調函數(shù)中，我們通過回調函數(shù)來來操作數(shù)據(jù)。
什么是跨域？
同源策略規(guī)定了如果兩個 url 的協(xié)議、域名、端口中有任何一個不等，就認定它們跨源了。
跨域的解決方式有哪幾種？ 1.JSONP 是 JSON with padding（填充式 JSON 或參數(shù)式 JSON）的簡寫。JSONP實現(xiàn)跨域請求的原理簡單的說，就是動態(tài)創(chuàng)建
在實際工作中，前后端配合并不是那么默契，如果后臺只給我接口，不能修改后臺，怎么跨域？
在vue項目和react項目中的config文件中，都有一個proxy代理設置，這個就是用來在開發(fā)環(huán)境下進行跨域的。對其進行設置就能實現(xiàn)跨域。
通過vue-cli腳手架搭建出來的項目,修改config文件夾下的index.js中的proxyTable就能實現(xiàn)：
module.exports = {
dev: {
env: {
NODE_ENV: ""development""
},
//proxy
// 只能在開發(fā)環(huán)境中進行跨域，上線了要進行反向代理nginx設置
proxyTable: {
//這里理解成用‘/api’代替target里面的地址，后面組件中我們掉接口時直接用api代替 比如我要調用"http://40.00.100.100:3002/user/add"，直接寫‘/api/user/add’即可
"/api": {
target: "http://news.baidu.com",//你要跨域的網(wǎng)址 比如 "http://news.baidu.com",
secure: true, // 如果是https接口，需要配置這個參數(shù)
changeOrigin: true,//這個參數(shù)是用來回避跨站問題的，配置完之后發(fā)請求時會自動修改http header里面的host，但是不會修改別的
pathRewrite: {
"^/api": "/api"http://路徑的替換規(guī)則
//這里的配置是正則表達式，以/api開頭的將會被用用‘/api’替換掉，假如后臺文檔的接口是 /api/list/xxx
//前端api接口寫：axios.get("/api/list/xxx") ， 被處理之后實際訪問的是：http://news.baidu.com/api/list/xxx
}
}
},
讓我們用本地起的服務來測試一下如何跨域 demo
0.用vue-cli搭建的腳手架，npm run dev 前端端口號一般是：http://localhost:8080
1.修改config文件中的index.js proxyTable:{}這段代碼，替換掉即可：
module.exports = {
dev: {
proxyTable: {
"/api": {
target: "http://localhost:8000",
secure: true,
changeOrigin: true,
pathRewrite: {
"^/api": "/api"
}
}
},
2.自己寫一個后臺，使用express+node.js ，不設置任何跨域頭，代碼如下：
注意自己需要在當前文件夾下提前準備一個list.json的文件，用來讀取數(shù)據(jù)，返回數(shù)據(jù)。fs.readFile("./list.json","utf8",cb)
let express = require("express");
let app = express();
let fs = require("fs");
let list = require("./list");
let bodyParser = require("body-parser");
app.use(bodyParser.json());
app.use(express.static(__dirname));
//read
function read(cb) { //用來讀取數(shù)據(jù)的，注意自己在mock文件夾下準備一些數(shù)據(jù)
fs.readFile("./list.json","utf8",function (err,data) {
if(err || data.length === 0){
cb([]); // 如果有錯誤 或者文件沒長度 就是空數(shù)組
}else{
cb(JSON.parse(data)); // 將讀出來的內容轉化成對象
}
})
}
//write
function write(data,cb) { // 寫入內容
fs.writeFile("./list.json",JSON.stringify(data),cb)
}
// 注意 沒有設置跨域頭
app.get("/api/list",function (req,res) {
res.json(list);
});
app.listen(8000,()=>{
console.log("8000 is ok");
});
3.前端調取的api代碼：
import axios from "axios";
axios.interceptors.response.use((res)=>{
return res.data; // 在這里統(tǒng)一攔截結果 把結果處理成res.data
});
export function getLists() {
return axios.get("/api/list");
}
4.在組件中進行跨域調取接口，打印數(shù)據(jù)
隨便在一個文件中引入api測試一下 打印出來接口返回的數(shù)據(jù)
import {getLists} from "../../api/index"
export default {
async created(){
let dataList=await getLists();
console.log(dataList,"我請求的數(shù)據(jù)");
},
5.查看控制臺，打印出數(shù)據(jù)，沒有保錯，代表跨域成功，代理服務成功
上線要進行nginx反向代理設置，同時應區(qū)分環(huán)境變量，具體設置請看圖片：歡迎更多補充，交流
文章版權歸作者所有，未經(jīng)允許請勿轉載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉載請注明本文地址：http://systransis.cn/yun/107351.html
摘要：由兩部分組成回調函數(shù)和數(shù)據(jù)?；卣{函數(shù)是當響應到來時應該在頁面中調用的函數(shù)?；卣{函數(shù)的名字一般是在請求中指定的。動態(tài)創(chuàng)建標簽，設置其，回調函數(shù)在中設置在頁面中，返回的作為參數(shù)傳入回調函數(shù)中，我們通過回調函數(shù)來來操作數(shù)據(jù)。 什么是跨域？ 同源策略規(guī)定了如果兩個 url 的協(xié)議、域名、端口中有任何一個不等，就認定它們跨源了。 跨域的解決方式有哪幾種？ 1.JSONP 是 JSON with ...
摘要：搭建后臺的全過程近期基于搭建前端項目，搭建后臺，遇到了不少問題，總結博客如下，有什么不正確的地方，請大家批評指正是非關系型數(shù)據(jù)庫。是用來啟動的，是的命令行客戶端。 Node + mongoDB 搭建后臺的全過程 近期基于 vue-cil 搭建前端項目， express + mongoose 搭建后臺，遇到了不少問題，總結博客如下，有什么不正確的地方，請大家批評指正^?_?^！ mong...
摘要：本地服務啟動端口，項目啟動端口，當前端用戶提交登錄信息到后端，便產生跨域，可以配置解決跨域問題一進入項目下的文件，添加接口的域名如果是接口，需要配置這個參數(shù)如果接口跨域，需要進行這個參數(shù)配置此處的設為二在前端發(fā)送請求頁面，設置請求三啟動 本地express服務啟動端口3000， vue-cli項目啟動端口8080， 當前端用戶提交登錄信息到后端，便產生跨域，可以配置 proxyTab...
摘要：我們將引入我們配置的中，再將修改如下路徑你們改下將印射為接口域名如果是接口，需要配置這個參數(shù)是否跨域需要的之后不管是生產環(huán)境，還是開發(fā)環(huán)境，都不用再修改我們的請求地址了。 前言 我們在使用vue-cli啟動項目的時候npm run dev便可以啟動我們的項目了，通常我們的請求地址是以localhost:8080來請求接口數(shù)據(jù)的，localhost是沒有辦法設置cookie的。 我們可以...
閱讀 2765·2023-04-25 14:15
閱讀 2708·2021-11-04 16:11
閱讀 3398·2021-10-14 09:42
閱讀 448·2019-08-30 15:52
閱讀 2829·2019-08-30 14:03
閱讀 3549·2019-08-30 13:00
閱讀 2117·2019-08-26 11:40
閱讀 3312·2019-08-26 10:25
