vue解決跨域方法

什麼是跨域

  跨域指瀏覽器不容許當前頁面的所在的源去請求另外一個源的數據。源指協議，端口，域名。只要這個3箇中有一個不一樣就是跨域。 這裏列舉一個經典的列子：

#協議跨域
http://a.baidu.com訪問https://a.baidu.com； #端口跨域 http://a.baidu.com:8080訪問http://a.baidu.com:80； #域名跨域 http://a.baidu.com訪問http://b.baidu.com； 

  如今不少公司都是採用先後分離的方式開發。那麼出現常常和會跨域打交道。我這裏整理平常開發中解決跨域的幾種方案。咱們前端使用的Vue，後端使用的NodeJs。

解決方案

proxyTable

  這裏vue腳手架生成的標準項目爲準。通常在項目config目錄下面有個index文件。裏面格式以下：

'use strict' const path = require('path') module.exports = { dev: { // Paths assetsSubDirectory: 'static', assetsPublicPath: '/', proxyTable: { '/api': { target: 'http://localhost:7001',//後端接口地址 changeOrigin: true,//是否容許跨越 pathRewrite: { '^/api': '/api',//重寫, } } }, host: '192.168.0.104', port: 8081, autoOpenBrowser: false, errorOverlay: true, notifyOnErrors: true, poll: false, useEslint: true, showEslintErrorsInOverlay: false, devtool: 'eval-source-map', cacheBusting: true, cssSourceMap: false, }, } 

  上面配置中，咱們根據實際狀況只須要修改proxyTable對於配置便可。假設我後端請求地址是http://localhost:7001，全部api的接口url都以/api開頭。因此首先須要匹配全部以/api開頭的.而後修改target的地址爲http://localhost:7001。最後修改pathRewrite地址。將前綴 '^api' 轉爲 '/api'。若是自己的接口地址就有 '/api' 這種通用前綴，就能夠把 pathRewrite 刪掉。注意這個方式只能在開發環境中使用。

CORS

  CORS即跨源資源共享，它定義了一種瀏覽器和服務器交互的方式來肯定是否容許跨域請求。它是一個妥協，有更大的靈活性，但比起簡單地容許全部這些的要求來講更加安全。可是CORS也具備必定的風險性，好比請求中只能說明來自於一個特定的域但不能驗證是否可信，並且也容易被第三方入侵。 這裏通常須要後端配合,開啓cors。通常各類語言都有相似的包。好比NodeJS的koa2-cors

var koa = require('koa'); //npm install --save koa2-cors var cors = require('koa2-cors'); var app = koa(); //開啓 app.use(cors()); 

這個方式解決的跨越問題支持開發和生產環境。可是有必定的安全性問題。

Nginx

  當咱們明白跨越的含義以後。只要解決了'源'的問題。那麼跨越也就不存在了。這裏咱們便會想到proxy，同時也會想到Nginx。

咱們只須要在部署靜態資源配置下面加上紅框裏面的配置就能夠了。同時這個方法支持開發環境和生產環境。

後端程序代理

  固然上面2個方法都須要後端的配合和須要修改服務器配置。全部還有一種方法不須要他們配合 ，咱們本身就能夠作到。就是咱們本身啓一個後端程序作代理。而後把全部的請求轉發到服務器。這裏要用到node的一個包http-proxy-middleware。關鍵代碼(express)以下

  

用Vue-cli腳手架搭建了個demo,先後分離就有跨域問題的出現。

vue-clie搭建demo步驟（傳送門）：https://www.cnblogs.com/wangenbo/p/8487764.html

我本身在網上找了2個接口作測試：

CSDN：https://www.csdn.net/api/articles?type=more&category=home&shown_offset=1524276761019196&first_view=false

掘金：https://suggest-follow-api-ms.juejin.im/v1/getByTag?tag=%E5%89%8D%E7%AB%AF&src=web&t=1

安裝模塊axios進行ajax請求，直接請求，確定顯示跨域，沒法請求。

 ===============    如下爲npm run dev 跨域的解決方法    ===============

腳手架Vue-cli已經幫咱們留好了接口

參考這篇文章才知道：https://blog.csdn.net/qq_31201781/article/details/78778193

在config目錄下的index.js文件，有個參數：

proxyTable:{}

因此，我把參數添加成：

原來接口：

CSDN：https://www.csdn.net/api/articles?type=more&category=home&shown_offset=1524276761019196&first_view=false

掘金：https://suggest-follow-api-ms.juejin.im/v1/getByTag?tag=%E5%89%8D%E7%AB%AF&src=web&t=1

請求連接就變成這樣了：

最後，把數據打印出來，就能夠了。。

===============    以上爲npm run dev 跨域的解決方法    ===============

 

 

===============    如下爲npm run build 跨域的解決方法    ===============

咱們要打包上線：就用npm run build會打包成dist文件

但發到線上，就得用nginx解決跨域。

首先，下載nginx

https://blog.csdn.net/biaoge0310/article/details/78900538

入門命令：

　 在ngix文件目錄下執行如下命令

　　start nginx　　開啓ngix

　　nginx -s quit　 退出　

　　nginx -s reload 重啓

        nginx -t 檢查配置文件是否成功 

而後：進入nginx/conf目錄下的，找到nginx.conf文件

添加以下配置：

啓動ngix服務器： start nginx

輸入網址：http://localhost:8099

完美！！！！打包後也解決了。。

===============    以上爲npm run build 跨域的解決方法    ===============