跨域问题

跨域问题

跨域访问是前后端开发中常常遇到的问题 采用cors或部署的时候使用nginx反向代理都是可以解决跨域访问的问题的

node+express 解决跨域

vue-resource代码(其实就是ajax技术)：

this.$http.get({url:"http://localhost:3000/getdata"})
.then(function (data) {
    console.log(data)
},function (error) {});
```    
nodejs部分：    
```js
var express = require('express');
var app = express();
//设置跨域访问 控制好响应头
app.all('*', function(req, res, next) {
    res.header("Access-Control-Allow-Origin", "*");
    res.header("Access-Control-Allow-Headers", "X-Requested-With");
    res.header("Access-Control-Allow-Methods","PUT,POST,GET,DELETE,OPTIONS");
    res.header("X-Powered-By",' 3.2.1')
    res.header("Content-Type", "application/json;charset=utf-8");
    next();
});

app.get('/getdata', function(req, res) {
    res.send({id:req.params.id, name: req.params.password});
});

app.listen(3000);
console.log('Listening on port 3000...');

http-proxy-middleware 解决跨域问题 只能在开发环境中使用

proxyTable: {
‘/list’: {
target: ‘http://api.xxxxxxxx.com‘,
changeOrigin: true,
pathRewrite: {
‘^/list’: ‘’
}
}
}
vue-cli的这个设置来自于其使用的插件http-proxy-middleware
github：https://github.com/chimurai/http-proxy-middleware
深入了解的话可以看该插件配置说明，似乎还支持websocket，很强大的插件。

webpack-dev-server 设置代理解决跨域问题 只能在开发环境中使用

详解见webpack的配置 (webpack-dev-server配置)[https://doc.webpack-china.org/configuration/dev-server/]
webpack-dev-server 设置代理 http://www.jianshu.com/p/3bdff821f859

//webpack 中dev-server设置带来 解决跨域问题
module.exports = {
 ...此处省略一万字

 // webpack-dev-server的配置
 devServer: {
 historyApiFallback: true,
 hot: true,
 inline: true,
 progress: true,
 port: 3000,
 host: '10.0.0.9',
 proxy: {
 '/test/*': {
     target: 'http://localhost',
     changeOrigin: true,
     secure: false
    }
 }
 },
};

nginx 设置代理 解决跨域问题

常用实例 采用nginx反向代理来解决跨域问题

js

location /api {
  rewrite  ^.+apis/?(.*)$ /$1 break;
  include  uwsgi_params;
  proxy_pass   http://localhost:1894;
 }

eg 开发中常用

配置localhost
使用 localhost 127.0.0.1 本地IP都可以进行访问

 server {
        listen       80;
        server_name  localhsot;
        #charset koi8-r;

        #access_log  logs/host.access.log  main;

        location / {
          ### 配置成本地webpack打包生成的路径
          root    D:/infore/infore-web/dist/;
          index  index.html index.htm;
        }

        location /api {
            ### 接口代理请求地址
            proxy_pass http://192.168.31.52:8089/api;
            proxy_redirect off;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
            # proxy_cookie_path /disconf /api;
            # proxy_set_header   Cookie $http_cookie;
        }

###

赏

谢谢支持我,技术交流请加微信

微信