前端跨域與代理

1、vue腳手架跨域與代理

1.跨域問題

文件config/index.js

原始代碼：

dev: {
    env: require('./dev.env'),
    port: 8080,
    autoOpenBrowser: true,
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    proxyTable: {},
    enabling this option.
    cssSourceMap: false
  }

proxyTable修改以下：

proxyTable: {
      '/api':{  
      //請求的服務器域名
        target:''
      }
    },

參考資料

2.遠程訪問問題

目的：寫好的項目但願在其餘電腦上或手機上查看。

方法：

• 打開文件 config/index.js，在dev對象中添加一個屬性host，值爲本機的ip地址
• 打開文件 build/dev-server.js,定義一個常量localhost = config.dev.host ,再將這個文件裏面的http://localhost按照原來的格式所有替換成剛定義的常量localhost。
  這樣在其餘電腦或者手機上直接訪問這個ip地址便可。

//eg：
//添加這一行代碼
const localhost = config.dev.host
//修改uri的值
const uri = localhost + ':' + port

2、常規webpack跨域與代理

找到配置文件中的出口（output）和入口（entry）配置，在同級對象下添加一個屬性：

devServer:{
        host:'172.16.0.105',  //代理地址-本機ip地址
        port:80,  //端口號
        proxy:{
            '/api':{
                target:''   //跨域訪問地址
            }
        }
    }

webpack的其餘配置案例

3、常規代理問題（不依賴webpack等打包工具）

• 在命令行輸入 npm init 生成 package.json 文件（已經安裝nodejs）
• 經過 npm 安裝 http-server，再在"script"對象中配置;

"scripts": {
    "dev":"http-server"
  },

• 運行 npm run dev。
• 而後就能夠經過本機ip地址訪問了

4、常規跨域問題（不依賴webpack等打包工具）

（同第三節）

"scripts": {
    "dev": "http-server -a 172.16.0.105 -p 8000 -P http://172.16.0.100:8080"
  },

第一個地址是本機ip地址及端口號，第二個地址是接口地址。