js跨域访问问题

转载

mob604756f99da6 2020-10-19 17:16:00

什么是跨域访问

这里说的js跨域是指通过js在不同的域之间进行数据传输或通信，比如用ajax向一个不同的域请求数据，或者通过js获取页面中不同域的框架中(iframe)的数据。只要协议、域名、端口有任何一个不同，都被当作是不同的域。如果进行跨域访问，浏览器会报跨域访问异常

NO ‘Access Control-Allow-Origin‘ ....

CORS:Cross-orign resource sharing跨域分享资源

总之，当前页面你发送请求时只要协议、域名、端口号有一个与当前页面不一致都属于跨域访问。

后端解决方法

在Controller层的处理器上解决

后端解决方式一

//解决方法一：http://localhost:9105也可设置为*，表示那个域可以进行跨域访问，但是*号不能用cookie,允许访问的域
response.setHeader("Access-Control-Allow-Origin", "http://localhost:9105");
//----如果用了cookie信息-----，必须加后面这句话，如果不用cookie可以不加这句话
response.setHeader("Access-Control-Allow-Credentials", "true");

后端解决方式二

//解决方法二：在处理器方法上加注解，allowCredentials="true"，默认为false
@CrossOrigin(origins="http://localhost:9105",allowCredentials="true")

在端口号为9105的web前端也要处理，以AngularJS为例，在Service.js中添加如下内容{‘withCredentials‘:true}

//而且客户端的请求也需要加参数{‘withCredentials‘:true} )
$http.get(‘http://localhost:9107/cart/addItemToCartList.do?itemId=‘+?+‘&num=‘+? ,{‘withCredentials‘:true} ).success.....

服务器反向代理

1、nginx反向代理解决跨域问题，找到nginx的配置文件“nginx.conf”，修改一下信息：

server {
    server_name_in_redirect off;
    location / {
        # 将下面的模板改为修改为你的项目地址
        # alias /path/to/your/project/; 
        alias /home/myProject/firmwareDepthAnalysisAndDetection/; //这是我的地址
    }
    location /api {
        rewrite /api/(.+)$ /$1 break;
        proxy_pass http://10.10.2.254:8080; //这里写自己要访问的接口api
    } 
}

2、使用node.js实现反向代理，选用安装http-proxy模块

npm install http-proxy

代码：

// 导入http模块
var http = require('http');
// 导入http-proxy模块
var httpProxy = require('http-proxy');

// 提供服务的端口号
var PORT = 1234;

// 创建反向代理服务
var proxy = httpProxy.createProxyServer();
// 监听错误事件
proxy.on('error', function (err, req, res) {
    // 输出空白响应数据
    res.write('error!');
    res.end();
});

// 创建服务
var app = http.createServer(function (req, res) {
    // 执行反向代理
    proxy.web(req, res, {
        // 目标地址
        target: 'http://localhost:8080'
    });
});

// 启动服务
app.listen(PORT, function () {
    console.log('server is running at %d', PORT);
});